https://www.jkawamoto.info/tags/ja-chartjs/ Recent content in ja-Chartjs on Junpei Kawamoto Hugo -- gohugo.io en-us junpei.kawamoto@acm.org (Junpei Kawamoto) junpei.kawamoto@acm.org (Junpei Kawamoto) © 2016-2017 Junpei Kawamoto Fri, 12 Aug 2016 00:00:00 +0000 https://www.jkawamoto.info/blog-ja/chartjs-in-angularjs/ Fri, 12 Aug 2016 00:00:00 +0000 junpei.kawamoto@acm.org (Junpei Kawamoto) https://www.jkawamoto.info/blog-ja/chartjs-in-angularjs/ 本稿は Qiita 投稿記事 のバックアップです． 概要 AngularJS から Chart.js を使う場合の備忘録． 結論から言えば，Angular Chart を利用すれば良い． Angular Chart の利用 ドキュメント にもあるように，canvas タグに chart クラスと表示するグラフタイプ別のクラスを付ける． 例えば，bar グラフを表示したい場合，class="chart chart-bar" を表示先の canvas に追加する． プロットするデータは，chart-data, chart-labels, chart-series, chart-dataset-override などの属性を使って渡す．ここの渡し方が，元々の Chart.js とは異なっていて，少しトリッキーである． chart-data は Chart.js におけるdata.datasets に対応する項目だが，配列か二次元配列しか渡せない． Char.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.