要显示不同的Chart.js工具提示标题,您可以使用Chart.js库提供的自定义工具提示功能。以下是一种实现方法:
<canvas id="myChart"></canvas>
// 获取Canvas元素
var ctx = document.getElementById('myChart').getContext('2d');
// 创建图表
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'My Dataset',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
// 根据索引获取对应的标题
var title = data.labels[tooltipItem[0].index];
return title;
}
}
}
}
});
在上述代码中,我们创建了一个柱状图,并配置了工具提示的回调函数。回调函数中的title
函数用于获取对应数据点的标题,并返回给工具提示。
领取专属 10元无门槛券
手把手带您无忧上云