ExtJSのChartを利用して、棒グラフを表示させたが、雨量計データが雨量と時間雨量の両方を表示させる必要があったが、ExtJSでは、うまく表示させることができなかった。
そこで、インターネットで色々探した結果、canvasJSというものがあり、canvasJSを使って、マルチバーチャート表示させてみた。
canvasJSは、ExtJSと違って非常にシンプルで、扱いやすい、グラフだけの場合はこちらのほうがいいかも。ただし、商用利用の場合は、ライセンス費用が必要で2019年11月18日現在、1開発者で1年間利用で$399であった。
手順は以下の通り
①canvasJSのファイルを読み込むHTMLファイルの作成
↓
②グラフを表示させるのjsファイル作成
1.canvasJSのファイルを読み込むHTMLファイルの作成
index.html
グラフを表示させるDIVを定義し、サイズを設定し、その後で、canvasjsのファイルと、実際グラフを描画するjsファイルを読み込む。
1 2 3 4 5 |
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"> </div> <script src="lib/canvasjs-2.3.2/canvasjs.min.js"></script> <script src="js/main.js"></script> |
2.グラフを表示させるのjsファイル作成
canvasJSのサンプルを参考に、jsファイル作成する。現状はまだデータが固定なので、
別途jsonファイルから取得するよう変更する。
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, title:{ text: "雨量情報" }, axisY: { title: "雨量(mm/10分)", titleFontColor: "#4F81BC", lineColor: "#4F81BC", labelFontColor: "#4F81BC", tickColor: "#4F81BC" }, axisY2: { title: "時間雨量(mm)", titleFontColor: "#C0504E", lineColor: "#C0504E", labelFontColor: "#C0504E", tickColor: "#C0504E" }, toolTip: { shared: true }, legend: { cursor:"pointer", itemclick: toggleDataSeries }, data: [{ type: "column", name: "雨量(mm/10分)", legendText: "雨量", showInLegend: true, dataPoints:[ { label: "09:00", y: 266.21 }, { label: "09:10", y: 302.25 }, { label: "09:20", y: 157.20 }, { label: "09:30", y: 148.77 }, { label: "09:40", y: 101.50 }, { label: "09:50", y: 97.8 } ] }, { type: "column", name: "時間雨量(mm)", legendText: "時間雨量", axisYType: "secondary", showInLegend: true, dataPoints:[ { label: "09:00", y: 100.46 }, { label: "09:10", y: 2.27 }, { label: "09:20", y: 3.99 }, { label: "09:30", y: 4.45 }, { label: "09:40", y: 2.92 }, { label: "09:50", y: 3.1 } ] }] }); chart.render(); function toggleDataSeries(e) { if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } chart.render(); } } |