Chart.jsを使ってグラフを描画する方法

![ChartJS.png](https://qiita-image-store.s3.amazonaws.com/0/160563/ef86cd8f-ff18-d511-23f4-73d1bdbcd017.png)


#公式サイト
* [Chart.js](http://www.chartjs.org/)

#事前準備
##プラグインの読込
プラグインの読込方法は2つ。
ソースを自身のサーバー内に置いて読み込んでくるかCDNを利用する。

* ソースのDL：[Github](https://github.com/chartjs/Chart.js)
* [CDN](https://cdnjs.com/libraries/Chart.js)

```html:qiita.rb
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
```

#利用方法
* チャートを描画したい場所にcanvasタグを記述

```html:qiita.rb
<canvas id="ChartDemo" width="400" height="400"></canvas>
```

* 描画したいグラフをJSで記述する 

##基本的な記述方法

```html:qiita.rb
<script>
//htmlタグの設定したIDを取得
var ctx = document.getElementById("ChartDemo");
//グラフを描画
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定 (line,bar,rader,polarArea,pie,doughnut,bubble)
    type: 'line',
    //描画するグラフのデータを設定
    data: {
　　　　　//X軸のラベル設定
        labels: ["...", "...", "..."],
　　　　　//仰臥するデータの細かな設定
        datasets: [
        　{
          //ここに細かなデータの設定を記述
        　}
    　]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>
```
* [設定できるオプション一覧](http://www.chartjs.org/docs/#chart-configuration-creating-a-chart-with-options)


###折れ線グラフの書き方
* [設定できる項目](http://www.chartjs.org/docs/#line-chart-dataset-structure)
* [設定オプション](http://www.chartjs.org/docs/#line-chart-chart-options)

```html:qiita.rb
<script>
var ctx = document.getElementById("ChartDemo");
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定(折れ線グラフ)
    type: 'line',
    //描画するグラフのデータを設定
    data: {
　　　　　//X軸のラベル
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
        　{
            //凡例
            label: "My First dataset",
            //折れ線グラフとX軸の間に色を描画するか否か
            fill: false,
            //背景色
            backgroundColor: "rgba(75,192,192,0.4)",
            //境界線の色
            borderColor: "rgba(75,192,192,1)",
            //点の色
            pointBorderColor: "rgba(75,192,192,1)",
            //点のサイズ
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointRadius: 1,
            //点にマウスオーバーした時の設定
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            //グラフの数値            
            data: [65, 59, 80, 81, 56, 55, 40],
        　}
    　]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>
```

###棒グラフの書き方
* [設定できる項目](http://www.chartjs.org/docs/#bar-chart-dataset-structure)
* [設定オプション](http://www.chartjs.org/docs/#bar-chart-chart-options)

```html:qiita.rb
<script>
var ctx = document.getElementById("ChartDemo");
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定(棒グラフ)
    type: 'bar',
    //描画するグラフのデータを設定
    data: {
        //X軸のラベル
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            //背景色指定(各グラフ毎)
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            //棒グラフの外枠線の色指定(グラフ毎)
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            //線の太さを指定(px)
            borderWidth: 1,
            //グラフの数値
            data: [65, 59, 80, 81, 56, 55, 40],
        }]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>
```