<Javascript>グラフ書いてみようかと思った
書き出し一行目で言うことじゃないと思うけどめちゃめちゃ眠い
JavaScriptでグラフを書く
今回はこんなことをやるのでメモを書きます。
このネタは多分複数回に分けて書いていきます。
目次
- 使うもの
- どうやって使うか
- 折れ線でのサンプル
- 今後の予定
1.使うもの
今回はchart.jsというフレームワークを使ってグラフを作っていきます。
chart.js
日本語ドキュメントはこちら
このフレームワークでできること
もちろんグラフが書けます。
- 棒グラフ
- 線グラフ
- レーダーチャート
- ドーナツ、円グラフ
- 鶏頭図
- バブルチャート
- 散布図
- 面グラフ
このぐらいいろいろグラフが書けます。
複数をただかけるだけじゃなく、そのグラフを組み合わせることも可能です。
2.どうやって使うか
ダウンロードしたやつを使う方法もあるんですが今回はCDNを引いて使いました。
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
あとはこれを使って実際にグラフを書いていきます。
書くときには描写するエリアを指定する必要があります。
<canvas id="hogehoge" width="" height=""></canvas>
この2つを使いつつ次はまず折れ線グラフを作ってみます。
3.折れ線グラフでのサンプル
ここまでやったならとりあえず実際にグラフ出したくねってなるので出してみます。
今回はサンプルコードを調べてみて、その上でデータとか大きさとかをちょっといじってみたくらいのコードを載せます。
(詳しいことは今後書きます。chart.jsは研究で今後使うと思ってるので自分のためにも書くと思ってます。hi)
htmlのコード
htmlに関してはさっき上で書いたcanvas要素を書くだけです。
<canvas id="myChart" width="5" height="2.5"></canvas>
シンプル
width,heightはpx単位ではなくchart.js独自のものっぽいです。
詳細はいろいろいじってみればいい感じになるって感じです。
JavaScriptのコード
JavaScriptのコードについてはコメントに色々書いてるのでまずはコードから。
//対象のidを指定してchartオブジェクトを作る new Chart(document.getElementById("myChart"), { //折れ線グラフを指定 "type": "line", //使用するデータを記述 "data": { //横軸ラベルの指定 "labels": ["00", "10", "20", "30", "40", "50", "60"], //データの情報 "datasets": [{ //データのラベル "label": "data sample", //実際のデータ(jsonデータ等に入れ替え) "data": [5, 6, 8, 20, 21, 30, 27], //塗りつぶし(しない) "fill": false, //線の色を指定(RGB) "borderColor": "rgb(75, 192, 192)", //線の湾曲を指定 "lineTension": 0.0 }] }, "options": {} });
実際に作成されるグラフ
それをやるとこんなグラフができます 実際に表示できるアニメーションとかもいろいろいじれるので面白いです。
4.今後の予定
- 大きさに関する詳細を調べる
- 複数表示のテスト
- サーバの情報を持ってきてグラフ書く
を中心に色々いじってみようかなと思っています。