chart.js - 如何获得stackedBar ChartJs中的总值总和

Question

我试图获得一个stackedBar 的所有值的总和，并将这个总数包含在工具提示中。

Note: my datasets aren't static, this is an example

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Corporation 1',
            backgroundColor: "rgba(220,220,220,0.5)",
            data: [50, 40, 23, 45, 67, 78, 23]
        }, {
            label: 'Corporation 2',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [50, 40, 78, 23, 23, 45, 67]
        }, {
            label: 'Corporation 3',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [50, 67, 78, 23, 40, 23, 55]
        }]

    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title:{
                    display:true,
                    text:"Chart.js Bar Chart - Stacked"
                },
                tooltips: {
                    mode: 'label',
                    callbacks: {
                       label: function(tooltipItem, data) {
                       var corporation = data.datasets[tooltipItem.datasetIndex].label;
                       var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                       var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                       return total+"--"+ corporation +": $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                  }
                    }
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });
    };

现在 total是每个数据集的总和，我需要每个stackedBar的总和。

例子

标签 A:值 A

标签 B:值 B

标签 C:值 C

总计:值 A + 值 B + 值 C

有可能获得那个总值(value)吗？

谢谢，伊达利亚。

Answer 1

首先你应该知道，如果你在 callback 中返回一个数组而不是单个字符串。在工具提示中，它将显示数组中的所有字符串，就好像它们是不同的数据集一样(有关更多详细信息，请参阅 this answer)。

因此，我将您的回调编辑为以下内容:

callbacks: {
    label: function(tooltipItem, data) {
        var corporation = data.datasets[tooltipItem.datasetIndex].label;
        var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

        // Loop through all datasets to get the actual total of the index
        var total = 0;
        for (var i = 0; i < data.datasets.length; i++)
            total += data.datasets[i].data[tooltipItem.index];

        // If it is not the last dataset, you display it as you usually do
        if (tooltipItem.datasetIndex != data.datasets.length - 1) {
            return corporation + " : $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
        } else { // .. else, you display the dataset and the total, using an array
            return [corporation + " : $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total];
        }
    }
}

可以查看完整代码 in this jsFiddle ，这是它的结果: