Chart.jsでかわいいグラフを作る

TOWNの開発で、Chart.jsというグラフを描くツールを使っていたので調べてみました。するとなんと、かわいいグラフが描ける！！ということなので、まとめてみましたー！！実際にグラフが表示される時の動きが、かわいい気がします（どーでもいいですが、実はかわいいもの好きだったりします。。。）

かわいいグラフを作る手順

1.Chart.jsの読み込み　　

htmlタグ内に以下のコードで、Chart.jsを読み込みます。(urlは最新版をとるようにしてください！)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js" type="text/javascript"></script>

もしくは、Chart.jsをここからDownloadして、htmlファイルと同じ階層に置いた後、以下のコードを追加してください。

<script src="Chart.js"></script>

2.実際にグラフを埋め込む

表示したいところに、以下のコードを書きます。width、heightは、お好みで！

<canvas id="myChart" width="400" height="400"></canvas>

3.グラフの詳細を設定

今回は、折れ線グラフを設定してみます。

// 以下全て参考例
var data = {
 labels: ["1月","2月","3月","4月","5月","6月","7月"],//X軸のラベル
 datasets: [
  {
   label: "My First dataset",//項目名
   fillColor: "rgba(220,220,220,0.2)",//塗りつぶす色
   strokeColor: "rgba(220,220,220,1)",//線の色
   pointColor: "rgba(220,220,220,1)",//値の点を塗りつぶす色
   pointStrokeColor: "#fff",//値の点の枠線の色
   pointHighlightFill: "#fff",//マウスオーバー時値の点を塗りつぶす色
   pointHighlightStroke: "rgba(220,220,220,1)",//マウスオーバー時値の点の枠線を塗りつぶす色
   data: [65, 59, 80, 81, 56, 55, 40]//値
  }
 ]
};

var options ={........} //グラフの詳細な設定が可能

var mygraph= new Chart(document.getElementById("myChart").getContext("2d")).Line(data, options);

以上のような、コードを書けば、グラフは描けます。グラフを複数表示させたいときは、datasetsの中身を増やしてあげるだけでOKです。また、optionの内容は以下のページを例にかなり細かく設定できます。
Chart.jsを利用して折れ線グラフを描く

また、折れ線グラフ以外の書き方は以下を参考にするとよいです！
Chart.jsを使って様々なグラフを描く