Chart 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設定プロパティを使用できます。

このプロパティを使用すると、凡例ラベルを生成する独自の関数を定義できます。 maxを追加するには、各データセットのデータ配列を反復処理し、maxを見つけて、ラベル文字列に組み込みます。

ここでは設定例を示します。返り値に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) : []; 
    }, 
    }, 
}, 

また、これを示すために​​を作成しました。