Chart.js JavaScript

[javascript]csvの中身をchartjsを使ってwebで表示(入門編)

概要

やれること :csvファイルを読み込んだデータをchartjsでグラフ化する

読者対象  :chartjsの簡単な使い方を知っている → この記事を見ればOK

必要時間  :20分程度

必要条件    :特になし

 

筆者のスキルレベル

htmlをドットインストールで学び終えたところで、実装経験がゼロ。

JavaScriptも全くの経験なし。CやMATLABやPythonの少々経験はあるので、JavaScriptについては調べながら実装していくくらい。

とりあえず、データをキレイに可視化したいという気持ちだけで実装中。

 

やりたいこと

①ローカルにあるcsvデータを読み込んでweb上でグラフ表示する。

②ボタンを押すとcsvファイル選択画面が現れ、csvを選択するとグラフが表示されるようにする。

③csvデータ(data.csv)は固定の数とする。

④グラフの横軸・縦軸も固定した値を使用。

 

ソースコード

まずはhtml

ココがポイント

データ読み出し後にdrawChart.js内のdrawChart関数を呼び出し描写を開始するようにしてます。

 

CSVファイルの中身(今回は適当です。)

 data.csv
12,19,3,2,3

ココがポイント

このcsvの数値を変えれば任意の数値のグラフが描写されます。

 

最後にjsファイル

ココがポイント

引数のresultを描写する関数をjsスクリプトで作成。

 

実行結果

まず表示される画面

 

次に、「ファイルを選択」を押してローカルにあるcsvファイル「data.csv」を選択

すると、data.csvの中身の数値がグラフ化されます。

 

次回挑戦したいこと

・csvのヘッダー等をグラフの縦軸や横軸に反映させる。

・csvデータ数に応じたグラフを表示させるようにする。

・ローカルにあるcsvデータをいちいち選択することなく切り替えられる機能をつける

・csvをローカルでなく、ネットワークから取得してくる。(日々、更新されるデータを取得するなど)

 

今回参考にしたサイト

今すぐ覚えられる!HTMLでJavaScriptを読み込む(呼び出す)方法を現役エンジニアが解説【初心者向け】
JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】
JavaScriptでCSVファイルを読み込む方法

 

-Chart.js, JavaScript

© 2022 monz code Powered by AFFINGER5