Вы можете нарисовать свои собственные линии прямо на canvas
, используя Plugin Core API . Он предлагает различные хуки, которые могут быть использованы для выполнения пользовательского кода. В следующем фрагменте кода я использую хук afterDraw
для рисования пунктирных линий для отдельных точек из набора данных.
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>