要保持Chart.js的点位置,并将图像与标签放在一起,您可以使用Chart.js的回调函数和自定义插件来实现。下面是一个示例代码:
// 创建自定义插件
Chart.plugins.register({
afterDraw: function(chart) {
var ctx = chart.ctx;
// 遍历每个数据点
chart.data.datasets.forEach(function(dataset, datasetIndex) {
var meta = chart.getDatasetMeta(datasetIndex);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// 获取数据点位置
var position = element.tooltipPosition();
// 在数据点位置绘制图像
ctx.drawImage(dataset.image, position.x - 10, position.y - 10, 20, 20);
// 在数据点位置绘制标签
ctx.fillText(dataset.labels[index], position.x + 10, position.y);
});
}
});
}
});
// 创建图表
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My Dataset',
data: [12, 19, 3, 5, 2, 3, 10],
fill: false,
borderColor: 'red',
// 图像
image: document.getElementById('myImage')
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
在上面的代码中,我们首先创建了一个自定义插件,它在图表绘制后执行。在插件的afterDraw
回调函数中,我们遍历每个数据点并获取其位置。然后,我们使用ctx.drawImage()
在数据点位置绘制图像,并使用ctx.fillText()
在数据点位置绘制标签。
要使用上面的代码,您需要在HTML中创建一个Canvas元素和一个图像元素,并将其ID分别设置为myChart
和myImage
,并将图像路径设置为src
属性值。
希望这可以帮助到您!