Question

每个分组的条都有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;
                    }

Answer 1

每个数据标签（即每个小节）都会调用formatter。这就是为什么您在每个小节的顶部都获得相同的值的原因。

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

编辑：

考虑之后，最简单的方法是使用mixed图表。您可以只计算每个组的组合值，然后为这些值添加图表。例如，您添加带有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

Answer 2

您可以尝试使用类似fiddle的方法，但是到目前为止，我还没有设置标签的格式和位置，您可以根据需要进行操作。

"onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';
           var sums = [0, 0, 0];
          this.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function(bar, index) {
              var data = dataset.data[index];
              ctx.fillText(data, bar._model.x, bar._model.y);
              sums[index] += data;
            });
            });
          sums.forEach(function(v, i) {
            ctx.fillText(v, 150*(i+1)+(i*50), 40);
          });
        }

图表js分组条形之和

2 个答案: