如何為 Chart.js 中的每個點添加垂直線和 label？

Question

如何為每個點添加一條垂直線並使所選數據顯示為 5.5k label，如下面的屏幕截圖所示？

Answer 1

您可以使用插件核心 API直接在canvas上繪制自己的線條。 它提供了不同的鈎子，可用於執行自定義代碼。 在下面的代碼片段中，我使用afterDraw鈎子將垂直線繪制到數據集中的各個點。

 const data = [65, 0, 80, 81, 56, 85, 40]; 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.getPixelForTick(index); var yTop = yAxis.getPixelForValue(data[index]); ctx.save(); ctx.strokeStyle = '#aaaaaa'; ctx.beginPath(); ctx.moveTo(x, yAxis.bottom); ctx.lineTo(x, yTop); ctx.stroke(); ctx.restore(); }); } }], data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: data, fill: false }] }, options: { legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false } }], xAxes: [{ gridLines: { display: false } }] } } });

 <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js'></script> <div style="width: 75%"> <canvas id="myChart" height="90"></canvas> </div>