ChartJs条形图中的可见点总数

Question

chartjs可以通过单击标签来隐藏数据集。我想总结一下条形图的所有要点，但只总结可见的要点。我知道如何总结所有点，但不知道如何检查数据集是否可见。总结点，我使用了onComplete动画事件：

animation: {
    onComplete: function(animation) {
    var sqm = 0;
    this.data.datasets.forEach(function (dataset) {
    dataset.data.forEach(function (points) {
        sqm = sqm + points;
         })
    })
    $("#SquareMeterSurface").val(sqm);
    }
},

这是它的外观：

如何仅对可见数据集求和（在蓝色图形上方的图中不可见）？我使用ChartJs 2.8

感谢

Answer 1

所以我自己找到了解决方案。传递给onComplete回调的'animation'变量中有一个数组'animation.chart.active'，可以循环查找活动数据集索引。仅当将鼠标悬停在图形的条形上方时，才会填充活动数组，这就是为什么仅将鼠标悬停在条形图上才会显示点总和的原因。

整个代码现在看起来像这样：

 function success_(data) {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            title: {
                display: true,
                text: 'Square Meters done per day'
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            },
            animation: {
                onComplete: function(animation) {
                    //alert('onAnimationComplete');

                    if (typeof animation.chart !== 'undefined' && typeof animation.chart.active !== 'undefined') {
                        var active_datasets = new Array();
                        //loop through active dataset to get the dataset indexes 
                        //which are visible to the user
                        animation.chart.active.forEach(function(active_ds) {
                            active_datasets.push(active_ds._datasetIndex);
                        })

                        //loop through datasets to get the points for active datasets
                        var sqm = 0;
                        var i = 0;
                        this.data.datasets.forEach(function (dataset) {
                            if (active_datasets.indexOf(i) != -1) {
                                dataset.data.forEach(function (points) {
                                    sqm = sqm + points;
                                })
                            }
                            i = i + 1;
                        })
                        $("#SquareMeterSurface").val(parseFloat(sqm).toFixed(1) + ' m2');
                    }
                }
            },
        }
    });
};

以及调用.Net Core MVC动作的ajax调用是这样的：

$.ajax({
    url: '/YourController/YourActionForGraph/',
    type: 'GET',
    data: {
        'param1': $('#param1').val(),
        'param2': $('#param2').val()
    },
    dataType: 'json',
    success: success_,
    error: function (request, error) {
        alert("Request: " + JSON.stringify(request));
    }
});