Показать максимальные, минимальные и средние значения каждого набора данных в легенде на диаграмме. js - PullRequest
Новая
       28

Показать максимальные, минимальные и средние значения каждого набора данных в легенде на диаграмме. js

0 голосов
/ 23 марта 2020

Я пытаюсь получить максимальное, минимальное и среднее значения каждого набора данных на графике. js. С моим текущим кодом я могу получить максимальные значения, но я не знаю, как я могу добавить больше меток в легенду для каждого набора данных. Мой текущий код такой: 

var ctx = document.getElementById('chartBarra');
ctx.height = 80;
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April'], 
    datasets: [
      {
        label: 'Low',
        data: [(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2)],
        backgroundColor: "rgba(34,139,34,.7)"
      },
      {
        label: 'Moderate',
        data: [(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2)],
        backgroundColor: "rgba(255,165,0,.5)"
      },
      {
        label: 'High',
        data: [(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2),(Math.random() * 30).toFixed(2)],
        backgroundColor: "rgba(255,0,0,.6)"
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    },

    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,
                */
              //text: dataset.label + " (Max Value: " + Chart.helpers.max(dataset.data).toLocaleString() + ")",

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


  }
});
<canvas id="chartBarra"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

Однако я все еще хотел использовать легенду по умолчанию для этой диаграммы. js присваивает каждому набору данных, который находится сверху, но при этом удаляет его. Большое спасибо.

...