Chart.js:对饼图yAxes上活动/显示的数据集中的项目总数求和

问题描述 投票:4回答:1

我想创建一个饼状图,其中yAxes显示活动数据集中的项目数,以下配置创建一个饼状图,其中yAxes显示所有数据集中的所有项目数,但是在停用数据集时不会更新/隐藏。

options = {
    title: {
        display: true,
        text: 'Stuff'
    },
    scales: {
        yAxes: [{
            ticks: {
                min: 0,
                max: sumOfItems,
            },
        }]
    },
    responsive: true
};

[我尝试使用beforeUpdate处理程序并遍历所有数据集进行汇总,但是我没有找到确定数据集是否处于活动状态/未显示的方法。

options = {
    title: {
        display: true,
        text: 'Stuff'
    },
    scales: {
        yAxes: [{
            ticks: {
                min: 0,
                max: sumOfItems,
            },
            beforeUpdate: function (scale) {
                let maxValue = 0
                if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
                    scale.chart.config.data.datasets.forEach(dataset => {
                        if (dataset && dataset.data) {
                            dataset.data.forEach(value => {
                                maxValue = maxValue + value
                            })
                        }
                    })
                }

                scale.options.ticks.max = maxValue
            }
        }]
    },
    responsive: true
};

我还考虑了监视对象的变化,以便在我打开或关闭数据集但不赞成使用Object.observe且我没有找到替代方法时发现更改的属性...

感谢您的任何帮助,谢谢。

javascript chart.js
1个回答
0
投票

找到了!

options = {
    title: {
        display: true,
        text: 'Stuff'
    },
    scales: {
        yAxes: [{
            ticks: {
                min: 0,
                max: numOfItems,
            },
            beforeUpdate: function (scale) {
                let maxValue = 0
                if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
                    scale.chart.config.data.datasets.forEach(dataset => {
                        if (dataset && dataset.data) {
                            var visibleDataSets = new Array();

                            dataset._meta[1].data.forEach(dataset => {
                                if (dataset.hidden === false) {
                                    visibleDataSets.push(dataset._index);
                                }
                            });

                            visibleDataSets.forEach(index => {
                                maxValue = maxValue + dataset.data[index];
                            });
                        }
                    })
                }

                scale.options.ticks.max = maxValue;

                if (maxValue === 0) {
                    scale.options.ticks.display = false;
                } else {
                    scale.options.ticks.display = true;
                }
            }
        }]
    },
    responsive: true
};

TL; DR dataset._meta[1].data[i].hidden是答案...

© www.soinside.com 2019 - 2024. All rights reserved.