線グラフ Chart.js で、任意のポイントでグラフに縦の線を描画する。
この方法、まだ完全に理解できてないけど、なんとなくこんな方法になるのかと。。。
データセットコントローラとやらを設定するみたい、
Chart.controllers.line.prototype
そして
datasets と並ぶ属性として、lineAtIndex で縦線を引きたいインデックスを指定する。
var graph = { labels: [ "0", "1", "2", "3", "4", "5", "6", "7", ], datasets: [{ label: "Algon", lineTension: 0, backgroundColor: "rgba(255, 255, 255, 1)", borderColor: "rgba(0, 0, 255, 1)", borderCapStyle: 'round', borderDash: [4, 10], borderDashOffset: 1.0, borderJoinStyle: "round", pointBorderColor: "rgba(0, 0, 255, 1)", pointBackgroundColor: "rgba(0, 0, 255, 1)", pointBorderWidth: 4, pointHoverRadius: 10, pointHoverBackgroundColor: "rgba(0, 0, 255, 1)", pointHoverBorderColor: "rgba(255, 240, 15, 1)", pointHoverBorderWidth: 4, pointRadius: 1, pointHitRadius: 10, fill: false, spanGaps: false, data: [] }], }; var options = { responsive: true, title:{ display:true, text:'Line Chart sample' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Days' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' }, ticks: { min: 0, max: 100, stepSize: 20 } }] } }; /********************* 任意の縦線を引く為の処理 ***********************/ var originalLineDraw = Chart.controllers.line.prototype.draw; Chart.helpers.extend(Chart.controllers.line.prototype, { draw: function(){ originalLineDraw.apply(this, arguments); var chart = this.chart; var ctx = chart.chart.ctx; var index = chart.config.data.lineAtIndex; if (index){ var xaxis = chart.scales['x-axis-0']; var yaxis = chart.scales['y-axis-0']; ctx.save(); ctx.beginPath(); ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top); ctx.strokeStyle = '#ff0000'; ctx.lineWidth = 1; ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom); ctx.stroke(); ctx.restore(); } } }); $(function(){ Chart.plugins.register({ beforeDraw: function(c){ var ctx = c.chart.ctx; ctx.fillStyle = "rgba(255, 255, 255, 1)"; ctx.fillRect(0, 0, c.chart.width, c.chart.height); } }); var canvas = document.getElementById("myChart"); var ctx = canvas.getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: graph, options: options, }); var data = [43, 36, 17, 28, 51, 66, 73 ]; data.forEach(function(e){ graph.datasets[0].data.push(e); }); /*** 3番目に 縦線を引く ***/ graph.lineAtIndex = 2; myChart.update(); });