javascript - 图表js条形图的总和

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

最佳答案

您可以尝试使用类似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);
          });
        }