ChartJS 如何获取堆叠条形图中的总值总和

2ekbmq32  于 2022-11-23  发布在  Chart.js
关注(0)|答案(8)|浏览(158)

我试图得到一个stackedBar的所有值的总和,并在工具提示中包含这个总和。
注意:我的数据集不是静态的,这只是一个示例

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值
有可能得到那个总值吗?
谢谢你,伊达利亚。

j2qf4p5b

j2qf4p5b1#

首先,您应该知道,如果您在工具提示的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,下面是它的结果:

tkqqtvp1

tkqqtvp12#

我修改了tektiv答案,以仅显示活动集的总计,并将其移至工具提示页脚。

tooltips: {
        mode: 'label',
        callbacks: {
            afterTitle: function() {
                window.total = 0;
            },
            label: function(tooltipItem, data) {
                var corporation = data.datasets[tooltipItem.datasetIndex].label;
                var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                window.total += valor;
                return corporation + ": " + valor.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");             
            },
            footer: function() {
                return "TOTAL: " + window.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
            }
        }
    }
sg2wtvxw

sg2wtvxw3#

Gaspar答案的简短版本:

tooltips: {
  callbacks: {
    footer: (tooltipItems, data) => {
      let total = tooltipItems.reduce((a, e) => a + parseInt(e.yLabel), 0);
      return 'Total: ' + total;
    }
  }
}

示例:https://jsfiddle.net/g3ba60zc/2/

7rfyedvj

7rfyedvj4#

在其他答案中,您将替换最后一个数据集,使用此数据集,您无需

tooltips: {
    callbacks: {
        title: function(tooltipItems, data) {
            return _this.chart.data.labels[tooltipItems[0].index];
        },
        footer: function(tooltipItems, data) {
            let total = 0;
            for (let i = 0; i < tooltipItems.length; i++) {
                total += parseInt(tooltipItems[i].yLabel, 10);
            }
            return 'Total: ' + total;
        }
    }
}

附言:是 typescript 。

dddzy1tm

dddzy1tm5#

@Haider这就是你要找的东西,我也遇到过同样的问题。我已经重用了你的代码,并在它的基础上进行了构建@tektiv
我做了一个小的改变,而不是建设到标签,我已经利用了后体。这删除了关键颜色
afterBody代码:

afterBody: function (tooltipItem, data) {
                  var corporation = data.datasets[tooltipItem[0].datasetIndex].label;
                var valor = data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index];
                var total = 0;
                for (var i = 0; i < data.datasets.length; i++)
                    total += data.datasets[i].data[tooltipItem[0].index];  
                return "Total : $" + total;
            }

完整代码位于JSFiddle
Picture demonstration of the finished tooltip

zed5wv10

zed5wv106#

使用Chart.js 2.5.0

var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

返回字符串值。要计算正确的和值,必须添加parseFloat语句:

tooltips: {
            mode: 'label',
            callbacks: {
                afterTitle: function() {
                    window.total = 0;
                },
                label: function(tooltipItem, data) {
                    var corporation = data.datasets[tooltipItem.datasetIndex].label;
                    var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

                      //THIS ONE:
                    valor=parseFloat(valor);

        window.total += valor;
                    return corporation + ": " + valor.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");             
                },
                footer: function() {
                    return "TOTAL: " + window.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");

                }
            }
        }
xkftehaa

xkftehaa7#

如果你使用的是Chart.js的旧版本,你必须用不同的方法来处理这个问题。我使用的是Chart.js 2.7.2版,这是我处理它的方法:

tooltips: {
            mode: 'label',
            callbacks: {
                footer: function (data) {
                    var total = 0;
                    for (var i = 0; i < data.length; i++) {
                        total += data[i].yLabel;
                    }
                    return 'Total: ' + total
                }
            }
        }
9fkzdhlc

9fkzdhlc8#

Chart.js自己制作的,非常令人满意的solution

options: {
  interaction: {
    intersect: false,
    mode: 'index',
  },
  plugins: {
    tooltip: {
      callbacks: {
        footer: footer,
      }
    }
  }
}

和代码中其他地方:

const footer = (tooltipItems) => {
  let sum = 0;

  tooltipItems.forEach(function(tooltipItem) {
    sum += tooltipItem.parsed.y;
  });
  return 'Sum: ' + sum;
};

对我来说效果很好!

相关问题