chart.js メモ
chart.jsで開発したときのメモ
棒×2本と線グラフで描画
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
おまけ
数値のカンマを入れたい。
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, } }], }, };