1

我正在使用带有堆叠数据集的 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”。

4

1 回答 1

1

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

访问“隐藏”属性可以像这篇文章一样完成：判断一行是否隐藏

这是更新的代码：

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;
    }
}
于 2019-06-03T07:20:23.610 回答