Chart.js の 線グラフ、線グラフのX軸のラベル配列に沿う data = [ 1, 2, 3, ... ] 値の配列ではなく
point 型で指定する場合、scatter で書かなければならない。
この書き方が結構わかりにくい。
data: [ { x: 10 , y:12 }, { x: 20 , y:22 } . .....]
で指定してX軸のラベル配列は別に指定させるのは、scatter でないとできない。
var graph = { datasets: [{ label: "alpha", type: "line", showLine: true, lineTension: 0, backgroundColor: "rgba(255, 140, 0, 0.6)", borderColor: "rgba(255, 140, 0, 0.6)", borderWidth: 2, borderCapStyle: 'round', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "round", pointBorderColor: "rgba(255, 140, 0, 0.6)", pointBackgroundColor: "rgba(255, 140, 0, 0.6)", pointBorderWidth: 1, pointHoverRadius: 10, pointHoverBackgroundColor: "rgba(255, 140, 0, 0.6)", pointHoverBorderColor: "rgba(255, 140, 0, 0.6)", pointHoverBorderWidth: 10, pointRadius: 1, pointHitRadius: 10, fill: false, data: [] },{ label: "beta", type: "line", showLine: true, lineTension: 0, backgroundColor: "rgba(0, 100, 0, 0.6)", borderColor: "rgba(0, 100, 0, 0.6)", borderWidth: 2, borderCapStyle: 'round', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "round", pointBorderColor: "rgba(0, 100, 0, 0.6)", pointBackgroundColor: "rgba(0, 100, 0, 0.6)", pointBorderWidth: 1, pointHoverRadius: 10, pointHoverBackgroundColor: "rgba(0, 100, 0, 0.6)", pointHoverBorderColor: "rgba(0, 100, 0, 0.6)", pointHoverBorderWidth: 6, pointRadius: 1, pointHitRadius: 10, fill: false, data: [] }] }; var graphOptions = { responsive: true, title:{ display:true, text:'scatter-line sample' }, chartArea: { backgroundColor: 'rgba(255, 255, 255, 1)' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'scale' }, ticks: { min: 0, max: 100, stepSize: 10 } }], yAxes: [{ display: true, scaleLabel: { display: true, fontSize: 22, labelString: 'Value' }, ticks: { fontSize: 26, min: 0, max: 120, stepSize: 40 } }] }, tooltips: { titleFontSize: 36, bodyFontSize: 36, callbacks: { title: function (tooltipItem, data){ return data.datasets[tooltipItem[0].datasetIndex].label; }, label: function (tooltipItem, data){ return "scale:" + tooltipItem.xLabel + " value:" + tooltipItem.yLabel; } } }, chartArea: { backgroundColor: 'rgba(255, 255, 255, 1)' }, }; /*******************/ $(function(){ Chart.pluginService.register({ beforeDraw: function(c){ if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) { var ctx = c.chart.ctx; var chartArea = c.chartArea; ctx.fillStyle = "rgba(240, 249, 255, 1)"; ctx.fillRect(0, 0, c.chart.width, c.chart.height); ctx.save(); ctx.fillStyle = c.config.options.chartArea.backgroundColor; ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); ctx.restore(); } } }); Chart.defaults.global.defaultFontSize = 26; var multiChart = new Chart(document.getElementById("myChart").getContext('2d'), { type: 'scatter', data: graph, options: graphOptions }); /*************************/ graph.datasets[0].data.push({ x:10, y:31 }); graph.datasets[0].data.push({ x:36, y:21 }); graph.datasets[0].data.push({ x:54, y:78 }); graph.datasets[0].data.push({ x:60, y:42 }); graph.datasets[1].data.push({ x:20, y:21 }); graph.datasets[1].data.push({ x:30, y:45 }); graph.datasets[1].data.push({ x:64, y:56 }); graph.datasets[1].data.push({ x:80, y:87 }); /*************************/ multiChart.update(); });
<div class="chart"> <canvas id="myChart"></canvas> </div>