読者です 読者をやめる 読者になる 読者になる

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

はじめに

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

作りたかったのはこんな感じのグラフ
f:id:yoppy0066:20161017003351p:plain

実装

$(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 %>"
  });
});

以上です