要在 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以禁用鼠标悬停时的工具提示。

使用这些选项,您应该能够固定饼图的工具提示并自定义其标签。

Chart.js 2.7.3 饼图 固定显示 Tooltip 内容

原文地址: https://www.cveoy.top/t/topic/l4SG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录