在 Chart.js 中显示类别相对于堆积条的百分比

Question

我有一个带有charts.js 的堆积条形图，当我将鼠标悬停在该类别上时，我想在工具提示中显示该类别的相对百分比。

因此，即使条形不是最大值，我也希望条形的类别加起来达到 100%

Answer 1

您可以使用 dataLabels 插件。我在this link为你做了一个例子。

    plugins: {
        datalabels: {
            formatter: function(value, context) {
            if(context.chart.data.datasets[context.datasetIndex] != null){
                    var barTotal = context.chart.data.datasets.map(function(x){return x.data[context.dataIndex]}).reduce((a, b) => a + b, 0);
                    return (value * 100 /  barTotal).toFixed(2);
                }
            }
        }
    }

如果您想查看悬停百分比，可以检查工具提示功能并为其应用相同的功能。