javascript - 图表JS为图例添加最大值

Question

我是 Chart JS 新手，我正在尝试为图例中的每个数据集添加最大值。我尝试过使用 legendCallback :

HTML:

<canvas id="lineChart"></canvas>

Javascript:

var ctx = document.getElementById("lineChart");
    var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['1','2','3','4','5','6','7','8','9','10'],
            datasets: [{
                label: "Max",
                backgroundColor: "rgba(235, 70, 70, 0.31)",
                borderColor: "rgba(231, 25, 25, 0.7)",
                pointBorderColor: "rgba(231, 25, 25, 0.7)",
                pointBackgroundColor: "rgba(231, 25, 25, 0.7)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointBorderWidth: 1,
                data: [31, 74, 6, 39, 20, 85, 7, 80, 35, 70]
            }, {
                label: "Avg",
                backgroundColor: "rgba(255, 255, 111, 0.3)",
                borderColor: "rgba(255, 255, 50, 0.70)",
                pointBorderColor: "rgba(255, 255, 50, 0.70)",
                pointBackgroundColor: "rgba(255, 255, 50, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: [82, 23, 66, 9, 99, 4, 2, 25, 67, 20]
            },
            {
                label: "Min",
                backgroundColor: "rgba(90, 189, 90, 0.3)",
                borderColor: "rgba(50, 173, 50, 0.70)",
                pointBorderColor: "rgba(50, 173, 50, 0.70)",
                pointBackgroundColor: "rgba(50, 173, 50, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: [30, 46, 60, 29, 79, 54, 23, 25, 47, 10]
            }]
        },
        options: {
            legend: {
                display: true,
                position: 'bottom'
            },
            legendCallback: function(chart) {
                return 'a';
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    }
                }]
            }
        }
    });

但显示的图例没有改变。我搜索了一些答案，也尝试使用: lineChart.generateLegend(); 但仍然没有结果。

是否可以在图例中添加每个数据集的最大值？提前致谢!

Answer 1

是的，可以在图例中显示每个数据集的最大值。您可以使用 legend.labels.generateLabels 配置属性来执行此操作。

此属性允许您定义自己的函数来生成图例标签。要添加最大值，我们只需迭代每个数据集的数据数组，找到最大值，并将其构建到标签字符串中。

这是一个示例配置。当我们在返回值中设置 text 属性时，奇迹就发生了。

legend: {
  display: true,
  position: 'bottom',
  labels: {
    generateLabels: function(chart) {
      var data = chart.data;
      return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {

        return {
          text: dataset.label + " (Max Value: " + Chart.helpers.max(dataset.data).toLocaleString() + ")",
          fillStyle: (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
          hidden: !chart.isDatasetVisible(i),
          lineCap: dataset.borderCapStyle,
          lineDash: dataset.borderDash,
          lineDashOffset: dataset.borderDashOffset,
          lineJoin: dataset.borderJoinStyle,
          lineWidth: dataset.borderWidth,
          strokeStyle: dataset.borderColor,
          pointStyle: dataset.pointStyle,

          // Below is extra data used for toggling the datasets
          datasetIndex: i
        };
      }, this) : [];
    },
  },
},

我还创建了一个codepen来证明这一点。