chartjsで棒グラフの作り方メモ

はじめに

adminLTEのサンプル使って棒グラフを表示しようとして比較対象なしのグラフを作ろうとしたらなぜかうまくいかなったのでメモ
また、x軸のメモリの間隔もあけたかったのでついでにメモ

作りたかったのはこんな感じのグラフ

実装

$(function () {
  Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function (data) {
      Chart.types.Bar.prototype.initialize.apply(this, arguments);
      var xLabels = this.scale.xLabels
      xLabels.forEach(function (label, i) {
        if (i % 3 != 0)
        xLabels[i] = '';
      })
    }
  });

  var barChartData = {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ・・・],
    datasets: [{
      fillColor: "rgba(0,60,100,1)",
      strokeColor: "black",
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, ・・・]

      pointColor: "rgba(210, 214, 222, 1)",
      pointStrokeColor: "#c1c7d1",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
    }]
  }

  var ctx = document.getElementById("barChart").getContext("2d");
  var barChartDemo = new Chart(ctx).BarAlt(barChartData, {
    responsive: true,
    scaleShowGridLines: false,
    barValueSpacing: 2,
    scaleLabel: "<%=value%>",
    tooltipTemplate: "<%=label%> : <%= value %>"
  });
});

以上です