書き出し一行目で言うことじゃないと思うけどめちゃめちゃ眠い

JavaScriptでグラフを書く

今回はこんなことをやるのでメモを書きます。
このネタは多分複数回に分けて書いていきます。

ここまでやったならとりあえず実際にグラフ出したくねってなるので出してみます。
今回はサンプルコードを調べてみて、その上でデータとか大きさとかをちょっといじってみたくらいのコードを載せます。
(詳しいことは今後書きます。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": {}
});