Chart.js 仅绘制 y 轴到点

Question

I'm wondering how to draw the y-axis only up to the point of one dataset. Like in this example:

So far I've tried a hacky version by adding an inversed white background on the dataset, but because I have some offset on the x-axis the white background cuts suddently, and the Y-axis lines becomes hidden.

Does anyone know how to loop through each grid line and give it the correct length?

Answer 1

You can draw you own lines directly on to the canvas using the Plugin Core API . It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw dashed lines for individual points from the dataset.

 const data = [1, 3, 2]; new Chart(document.getElementById("myChart"), { type: "line", plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; var xAxis = chart.scales['x-axis-0']; var yAxis = chart.scales['y-axis-0']; xAxis.ticks.forEach((value, index) => { var x = xAxis.getPixelForValue(undefined, index); var yTop = yAxis.getPixelForValue(data[index]); ctx.save(); ctx.setLineDash([10, 5]); ctx.strokeStyle = '#888888'; ctx.beginPath(); ctx.moveTo(x, yAxis.bottom); ctx.lineTo(x, yTop); ctx.stroke(); ctx.restore(); }); } }], data: { labels: ["A", "B", "C"], datasets: [{ label: "My First Dataset", data: [1, 3, 2], fill: false, borderColor: "rgb(75, 192, 192)", lineTension: 0.3 }] }, options: { legend: { display: false }, scales: { xAxes: [{ offset: true, gridLines: { color: 'white' } }], yAxes: [{ ticks: { beginAtZero: true, max: 4, stepSize: 1 } }] } } });

 canvas { max-width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" width="10" height="10"></canvas>