AngularJSでChart.jsを使う

# 概要
[![English](https://img.shields.io/badge/English-here-lightgrey.svg?style=flat)](https://www.jkawamoto.info/blogs/chartjs-in-angularjs/)
[AngularJS](http://angularjs.org/) から [Chart.js](http://www.chartjs.org/) を使う場合の備忘録．
結論から言えば，[Angular Chart](http://jtblin.github.io/angular-chart.js/) を利用すれば良い．

# Angular Chart の利用
[ドキュメント](http://jtblin.github.io/angular-chart.js/) にもあるように，`canvas` タグに `chart` クラスと表示するグラフタイプ別のクラスを付ける．
例えば，bar グラフを表示したい場合，`class="chart chart-bar"` を表示先の `canvas` に追加する．

プロットするデータは，`chart-data`, `chart-labels`, `chart-series`, `chart-dataset-override` などの属性を使って渡す．ここの渡し方が，元々の [Chart.js](http://www.chartjs.org/) とは異なっていて，少しトリッキーである．

`chart-data` は Chart.js におけるdata.datasets に対応する項目だが，配列か二次元配列しか渡せない．
Char.js では，ラベルや色情報も合わせた次のようなオブジェクトを渡していた．

```js
datasets: [{
  label: '# of Votes',
  data: [12, 19, 3, 5, 2, 3],
  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)'
  ],
  borderWidth: 1
},
...
]
```

Angular Chart では，datasets 配列の各オブジェクトから `data` 属性だけ抜き出して作った配列を
 `chart-data` 属性に渡す．

```js
class GraphCtrl{

  constructor() {

    this.data = [
      [12, 19, 3, 5, 2, 3],
      ...
    ];

  }

}
```

としておいて，テンプレートは`<canvas class="chart chart-bar" chart-data="$ctrl.data" />` とする．

では，datasets の各オブジェクトで指定していた `label` はどうなるかと言うと，
label だけを集めた配列を作って `chart-series` に渡す．

また，それ以外の項目， 上の例では，`backgroundColor`, `borderColor`, `borderWidth` などは，
`chart-dataset-override` 属性を使う．
この属性には，元々の `datasets` の内容を渡せば良い．
（実際には，配列内の各オブジェクトから `data` と `label` を除いたものを渡すべきだろう）

ただし，`chart-dataset-override` の方で `data` も渡せるのだからといって，
`chart-data` を設定しないとエラーになる．

# 例
Chart.js のマニュアルにある Bar Chartの[例](http://www.chartjs.org/docs/#getting-started-creating-a-chart)を Angular Chart 用に書き換えてみる．

##Chart.js 版
```js
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      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)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
```

## Angular Chart 版

```js:chart.js
class ChartCtrl{

  constructor(){
    
    this.labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
    this.data = [
      [12, 19, 3, 5, 2, 3]
    ];
    this.seriese = ["# of Votes"];
    this.datasets = [
      {
        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)'
        ],
        borderWidth: 1
      }
    ];
    this.options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    };

  }

}
```

```chart.html
<canvas class="chart chart-bar"
  chart-data="$ctrl.data"
  chart-labels="$ctrl.labels"
  chart-series="$ctrl.seriese"
  chart-dataset-override="$ctrl.datasets"
  chart-options="$ctrl.options"
/>
````

なお，上記の例の様に，datasets が一つしかない場合，
`data`, `datasets` は配列にしなくても良いが，`chart-series` は無視されるようになる．
つまり，

```js
this.data = [12, 19, 3, 5, 2, 3];
this.datasets = {
  label: "# of Votes",
  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)'
  ],
  borderWidth: 1
};
```

の様に，`label: "# of Votes"` を追加することを忘れないようにする．