Question

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

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

我在该值旁边添加了总计（此数据集和“以下”数据集）。

在我从图例中取消选择数据集之前，此方法可以正常工作，因为总数据不会更新，并且会忽略隐藏的数据集。

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

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/

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

例如，当您取消选择“可用”数据集时，工具提示总数不会更新。

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

Answer 1

我今天再次探讨了这个问题，并很快找到了解决方案。

访问“ hidden”属性的操作类似于这篇文章：Tell if an line is hidden

这是更新的代码：

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-取消选择图例时，工具提示回调函数将忽略隐藏的数据集

1 个答案: