javascript - 图表 js 分组条的总和

问题描述

我对每个分组条有 3 个不同的值。我想对这 3 个值求和并在每列的顶部显示总和 - Σ59 和 Σ89。

我正在测试下面无法正常工作的代码。数字 59 显示在每一列上方，而不是列值。

formatter:  function(value, ctx) {
                        console.log(ctx.chart.data.datasets)
                        let sum = 0;
                        for (var i = 0; i < ctx.chart.data.datasets.length; i++) {
                             sum +=  parseInt(ctx.chart.data.datasets[i].data[0]);

                        }
                        return sum;
                    }

标签： javascriptchart.js

formatter为每个数据标签调用，这意味着每个条。这就是为什么您在每个条形图顶部都获得相同值的原因。

可能的解决方案是为组合值绘制一个“不可见”条，或者检查formatter函数内部是否为居中条调用它。然后，您可以使用多行标签创建一个标签，该标签具有当前柱的值和组合值。

编辑：

经过考虑，最简单的方法是使用混合图表。您可以计算每个组的组合值并为这些值添加图表。例如，您添加带有的折线图showLines: false。

new Chart('myMixedCharts', {
    type: 'bar',
    data: {
        labels: ['foo', 'bar'],
        datasets: [
          {
            label: "Value 1",
            data: [12, 5]
          },
          {
            label: "Value 2",
            data: [7, 8]
          },
          {
            label: "Group value",
            data: [19, 13],
            type: "line",
            showLines: false
          }
        ]
    }
});

或者作为jsFiddle

javascript - 图表 js 分组条的总和

问题描述

解决方案

推荐阅读