Log.log(work)

いろんな作業メモ

chart.js メモ

chart.jsで開発したときのメモ

棒×2本と線グラフで描画

Javascript:

var data ={
 labels: ['2017/01','2017/02','2017/03','2017/04','2017/05'],
 lineLabel: '線グラフのラベル'
 linedata: ['100','200','300','400','500'],
 bar1Label: '棒グラフ1のラベル'
 bar1data: ['10','20','30','40','50'],
 bar2Label: '棒グラフ2のラベル'
 bar2data: ['50','40','30','20','10'],
};


var chartData = {
  labels: data.labels,
  datasets: [{
    type: 'line',
    label: data.lineLabel,
    data: data.linedata,
    fill: false,
    backgroundColor: '#fff',
    yAxisID: 'y-axis-right',
  },
  {
    type: 'bar',
    label: data.bar1Label,
    data: data.bar1data,
    yAxisID: 'y-axis-left',
  },
  {
    type: 'bar',
    label: data.bar2Label,
    data: data.bar2data,
    yAxisID: 'y-axis-left',
  },
  ],
};

var complexChartOption = {
  responsive: true,
  scales: {
   yAxes: [{
    id: 'y-axis-left',
    type: 'linear',
    position: 'left',
   }, 
   {
    id: 'y-axis-right',
    type: 'linear',
    position: 'right',
    gridLines: {
     borderDash: [2],
     borderDashOffset: 0.0,
    },
   }],
  },
 };

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: complexChartOption,
});

html:

  <canvas id="canvas"></canvas>

参考:

javascript - Grouped bar charts, in chart.js - Stack Overflow

おまけ

数値のカンマを入れたい。

Javascript:

  var complexChartOption = {
    responsive: true,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return String(value).split(/(?=(?:...)*$)/).join(',');
        }
      }
    },
    scales: {
      yAxes: [{
        id: 'y-axis-left',
        type: 'linear',
        position: 'left',
        ticks: {
          callback: function(label, index, labels) {
            return String(label).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        },
        scaleLabel: {
            display: true,
            labelString: data.bar1Label + ' & ' + data.bar2Label,
        }
      }, 
      {
        id: 'y-axis-right',
        type: 'linear',
        position: 'right',
        gridLines: {
          borderDash: [2],
          borderDashOffset: 0.0,
        },
        ticks: {
          callback: function(label, index, labels) {
            return String(label).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        },
        scaleLabel: {
            display: true,
            labelString: data.lineLabel,
        }
      }],
    },
  };