「canvasJS」のChartを利用して、複数カラムの棒グラフ表示させる

ExtJSのChartを利用して、棒グラフを表示させたが、雨量計データが雨量と時間雨量の両方を表示させる必要があったが、ExtJSでは、うまく表示させることができなかった。

そこで、インターネットで色々探した結果、canvasJSというものがあり、canvasJSを使って、マルチバーチャート表示させてみた。
canvasJSは、ExtJSと違って非常にシンプルで、扱いやすい、グラフだけの場合はこちらのほうがいいかも。ただし、商用利用の場合は、ライセンス費用が必要で2019年11月18日現在、1開発者で1年間利用で$399であった。

手順は以下の通り

①canvasJSのファイルを読み込むHTMLファイルの作成

②グラフを表示させるのjsファイル作成

1.canvasJSのファイルを読み込むHTMLファイルの作成

index.html

グラフを表示させるDIVを定義し、サイズを設定し、その後で、canvasjsのファイルと、実際グラフを描画するjsファイルを読み込む。

2.グラフを表示させるのjsファイル作成

canvasJSのサンプルを参考に、jsファイル作成する。現状はまだデータが固定なので、
別途jsonファイルから取得するよう変更する。

main.js

Print Friendly, PDF & Email

シェアする

  • このエントリーをはてなブックマークに追加

フォローする