ChartJS 4迁移:从工具提示回调访问其他数据集

q9rjltbz  于 2023-02-16  发布在  Chart.js
关注(0)|答案(1)|浏览(203)

我正在从ChartJS 2.9.3迁移到4.2.1(当前版本)。通过遵循3.x4.x迁移指南,我已经解决了大多数问题,但我遇到了一个问题,我看不到解决方案。
我的一个图表是堆叠条形图,它有两个数据集:

let chartData = {
    // other stuff...
    datasets: [
        { label: "Has thing", data: [200, 250, etc] },
        { label: "Does not has thing", data: [10, 4, etc] },
    ]
}

在我的工具提示中,我访问了两个数据集,创建了一个自定义工具提示,其中包含每个堆栈中每个部分的百分比表示。例如,第一个堆栈的工具提示可能会说:“有件事:200例(95.2%)”和“无事件:10(4.8%)"。我的回调函数看起来像这样:

// other stuff
callbacks: {
    label: function(tooltipItem, data) {
        let dataset = data.datasets[tooltipItem.datasetIndex];

        let count_with = data.datasets[0].data[tooltipItem.index]
        let count_without = data.datasets[1].data[tooltipItem.index]
        let total = count_with + count_without

        let this_dataset_count = dataset.data[tooltipItem.index]
        let this_dataset_perc = (this_dataset_count / total * 100).toFixed(1)

        let label = dataset.label + ": "
        label += this_dataset_count + " (" + this_dataset_perc + "%)"
        return label;
    }
}

看看3.x迁移指南,他们似乎从工具提示回调中删除了data参数,而是选择将项目的dataset直接添加到tooltipItem。不幸的是,他们似乎没有指定如何访问 * 其他 * 数据集。
此功能是否已完全删除,或者是否有其他访问方式?

yh2wf1be

yh2wf1be1#

正如@kikon指出的,data可以通过context.chart.data访问,但由于某种原因,当我console.dir()上下文对象时,它并没有出现,所以我完全忽略了它。
无论如何,对于任何可能在未来有所帮助的人,这里有一个工作版本:

callbacks: {
    label: function(context) {
        const datasets = context.chart.data.datasets
        const countWith = datasets[0].data[context.dataIndex]
        const countWithout = datasets[1].data[context.dataIndex]
        const perc = (context.raw / (countWith + countWithout) * 100).toFixed(1)
        return `${context.dataset.label}: ${context.formattedValue} (${perc}%)`
    }
}

相关问题