如何获得stackedBar ChartJs中的总和 [英] How get sum of total values in stackedBar ChartJs

问题描述

我正在尝试获取stackedBar的所有值的总和，并将其总计包含在工具提示中。

注意：我的数据集不是静态的，这是一个示例

  var barChartData = {
标签：[[ January， February， March， April， May， June， July]，
数据集：[{
标签：'Corporation 1'， 
 backgroundColor： rgba（220,220,220,0.5），
数据：[50，40，23，45，67，78，23] 
}，{
标签：'公司2'，
背景颜色： rgba（151,187,205,0.5），
数据：[50，40，78，23，23，45，67] 
}，{
标签：公司3，
背景颜色： rgba（151,187,205,0.5），
数据：[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，
选项：{
标题：{
 display：true，
文本： Chart.js条形图-堆叠 
}，
工具提示：{
模式：'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 +：$ +勇气.toFixed（2）.replace（/（\d）（？=（\d {3}）+ \。）/ g，'$ 1，'）; 
} 
} 
}，
个响应ive：true，
标度：{
 xAxes：[{
 stacked：true，
}]，
 yAxes：[{
 stacked：true 
}] 
} 
} 
}）； 
}; 
  

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

示例

标签A：值A

标签B：价值B

标签C：价值C

总计：值A +值B +值C

是否有可能获得总价值？

感谢伊达利亚

解决方案

首先，您应该知道，如果在回调中返回数组而不是单个字符串，它会显示数组中的所有字符串，就好像它是不同的数据集一样（请参见

I'm trying to get the sum of all values of a stackedBar and include this total in tooltip.

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
                    }]
                }
            }
        });
    };

Now total is the sum per dataset and I need the sum per stackedBar.

Example

Label A: value A

Label B: value B

Label C: value C

TOTAL: value A + value B + value C

It is possible to get that total value?

Thanks, Idalia.

解决方案

First you should know that if you return an array instead of a single string in the callback of the tooltip, it will display all the strings in your array as if it were different datasets (see this answer for more details).

So I edited a little bit your callback to the following:

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];
        }
    }
}

You can see the full code in this jsFiddle, and here is its result :

这篇关于如何获得stackedBar ChartJs中的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！