JavaScriptで円グラフや棒グラフなどを簡単に表示できるライブラリ「Chart.js」
ちょっと仕事で使用する機会があったので、お勉強がてら記事にします。
まずは基本から。
棒グラフをExcel風の配色で表示します。
基本的なハナシ
使用したChart.jsのバージョンは「2.7.1」です。
※公式HPはこちら
また、下記のサイトを参考にしました。ありがとうございます。
◆基本的な設定の参考サイト:https://qiita.com/masatatsu/items/a311e88f19eecd8f47ab
◆入館者数の管理等に使えるChart.jsの積み上げ棒グラフ:http://yawatosho.hateblo.jp/entry/2016/09/12/223407
使用するデータ
今回使用するサンプルデータです。
果物の販売個数(日別)
2017/10/28 | 2017/10/29 | 2017/10/30 | 2017/10/31 | 2017/11/1 | |
---|---|---|---|---|---|
バナナ | 5 | 10 | 5 | 10 | 5 |
りんご | 0 | 1 | 2 | 3 | 4 |
梨 | 10 | 2 | 5 | 11 | 12 |
みかん | 3 | 6 | 1 | 3 | 7 |
いちご | 2 | 3 | 4 | 5 | 6 |
柿 | 1 | 5 | 3 | 2 | 4 |
ぶどう | 6 | 7 | 8 | 9 | 10 |
シンプルなサンプルデータを用います。
OFFICE標準テーマ風
まずはExcelで表示した場合。通常の集合棒グラフと積上棒グラフの2種類で表現してみます。


これをChart.jsで表現します。


フォントサイズや凡例の表示位置の違いなどあるものの、ほぼ同じように表示できているのではないでしょうか。
尚、このカラーテーマを表現する為に用いている各色のRGB値は下記のとおりです。ソースコードは後ほどご紹介します。
バナナ:RGB(91,155,213); りんご:RGB(237,125,49); 梨 ;RGB(165,165,165); みかん:RGB(255,192,0); いちご:RGB(68,114,196); 柿 :RGB(112,173,71); ぶどう:RGB(37,94,145);
OFFICE2007-2010テーマ風
少し古いテーマですが、こちらも載せておきます。

これをChart.jsで表現します。

このカラーテーマのRGB値は下記のとおりです。
バナナ:RGB(79,129,189); りんご:RGB(192,80,77); 梨 ;RGB(155,187,89); みかん:RGB(128,100,162); いちご:RGB(75,172,198); 柿 :RGB(247,150,70); ぶどう:RGB(44,77,117);
ソースコード
Chart.jsでグラフ表示する為のソースコードは以下になります。
※スクリプト部分のみです。
var ctx = document.getElementById("myChart").getContext('2d'); var original = Chart.defaults.global.legend.onClick; Chart.defaults.global.legend.onClick = function(e, legendItem) { update_caption(legendItem); original.call(this, e, legendItem); }; var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["2017/10/28", "2017/10/29", "2017/10/30", "2017/10/31", "2017/11/1"], datasets: [{ label: 'バナナ', backgroundColor: "rgba(91,155,213,1)", data: [5, 10, 5, 10, 5], }, { label: 'りんご', backgroundColor: "rgba(237,125,49,1)", data: [0, 1, 2, 3, 4], }, { label: '梨', backgroundColor: "rgba(165,165,165,1)", data: [10, 2, 5, 11, 12], }, { label: 'みかん', backgroundColor: "rgba(255,192,0,1)", data: [3, 6, 1, 3, 7], }, { label: 'いちご', backgroundColor: "rgba(68,114,196,1)", data: [2, 3, 4, 5, 6], }, { label: '柿', backgroundColor: "rgba(112,173,71,1)", data: [1, 5, 3, 2, 4], }, { label: 'ぶどう', backgroundColor: "rgba(37,94,145,1)", data: [6, 7, 8, 9, 10], }] }, options: { title: { display: true, text: '果物の販売数(日別)', padding:3, fontSize: 26 }, scales: { xAxes: [{ // stacked: true, //積み上げ有効・無効設定 categoryPercentage:0.8 }], yAxes: [{ // stacked: true, // 積み上げ有効・無効設定 ticks: { stepSize: 2 // ExcelのStep数に合わせる } }] }, legend: { labels: { boxWidth:12, padding:20 }, display: true }, tooltips:{ mode:'label' } } });
backgroundcolorの設定を表示したいRGB値に変更してください。
また、積み上げ棒グラフに設定するにはscalesのコメントアウトをはずしてください。
最後にひとこと
今回は導入ということで、基本的な内容でした。
次回からはさらに踏み込んで色々な表示をしてみたいと思いますので、お楽しみに!