Chart.js 2.7.3 饼图 固定显示 Tooltip 内容
要在 Chart.js 2.7.3 中固定饼图的工具提示,可以使用以下选项:
options: {
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[tooltipItem.index];
var percentage = Math.floor(((currentValue/total) * 100)+0.5);
return dataset.labels[tooltipItem.index] + ': ' + currentValue + ' (' + percentage + '%)';
}
}
},
hover: { mode: null },
responsive: true,
maintainAspectRatio: false
}
在这个选项中,我们首先将工具提示的'enabled'选项设置为false,以禁用默认的工具提示。然后,我们使用'callbacks'选项来定义一个自定义的工具提示标签,该标签将显示饼图中每个部分的标签、值和百分比。最后,我们将'hover'选项设置为null以禁用鼠标悬停时的工具提示。
使用这些选项,您应该能够固定饼图的工具提示并自定义其标签。
原文地址: https://www.cveoy.top/t/topic/l4SG 著作权归作者所有。请勿转载和采集!