chart.js

Question

我正在使用带有堆叠数据集的 chart.js 折线图。

鼠标悬停在单个数据点上时，只显示当前数据集的值。

我在值旁边添加了（这个和 'below' 数据集的总数）。

在我从图例中取消选择数据集之前，这一切正常，因为不会更新总数并忽略隐藏的数据集。

这是显示数据集值和总数的代码。

callbacks: {
    label: function(tooltipItem, data) {
        let total = 0;
        let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        let stop = tooltipItem.datasetIndex+1;
        for (let i = 0; i < stop; i++) {
            total += data.datasets[i].data[tooltipItem.index];
        }
        total = Math.floor(total * 100) / 100;
        return 'Value: ' + value + ' Total: ' + total;
    }
}

你可以在这里查看 https://jsfiddle.net/x1zycrh4/1/

当您将鼠标悬停在任何点上时，您会看到旁边的值和总数。

但是当您取消选择 "Available" 数据集时，工具提示总数不会更新。

为此，我想从我的工具提示回调函数中忽略隐藏的数据集，但我似乎无法访问 'data.datasets[tooltipItem.datasetIndex].hidden'。

Answer 1

我今天重新审视了这个问题，很快就找到了解决方案。

访问 'hidden' 属性可以像这样 post:

这是更新后的代码：

callbacks: {
    label: function(tooltipItem, data) {
        let total = 0;
        let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        let stop = tooltipItem.datasetIndex+1;
        for (let j = 0; j < stop; j++) {
            if(!data.datasets[j]._meta[Object.keys(data.datasets[j]._meta)[0]].hidden) {
                total += data.datasets[j].data[tooltipItem.index];
            }
        }
    total = Math.floor(total * 100) / 100;
    return 'Value: ' + value + ' Total: ' + total;
    }
}

chart.js - 工具提示回调函数在取消选择图例时忽略隐藏的数据集

chart.js - tooltip callback function ignore hidden datasets when deselecting legend

javascript

linechart

tooltip