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で表示した場合。通常の集合棒グラフと積上棒グラフの２種類で表現してみます。

Excel表示データ①
Excel表示データ②

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

Chart.js表示データ①
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テーマ風

少し古いテーマですが、こちらも載せておきます。

Excel表示データ

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

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のコメントアウトをはずしてください。

最後にひとこと

今回は導入ということで、基本的な内容でした。
次回からはさらに踏み込んで色々な表示をしてみたいと思いますので、お楽しみに！