диаграмма. js загрузить итоговые данные при нажатии на легенду - PullRequest
Новая
       4

диаграмма. js загрузить итоговые данные при нажатии на легенду

0 голосов
/ 16 июня 2020

Я создал диаграмму с диаграммой. js. Я хочу добавить общую сумму столбца. У меня есть событие щелчка для легенды, отображающей указанный c тип. Я хочу отобразить общую сумму столбца. Я пробовал totalizer. Но не повезло. 

/*const totalizer = {
    id: 'totalizer',
    beforeUpdate: chart => {
        let totals = {}
        let utmost = 0

            chart.data.datasets.forEach((dataset, datasetIndex) => {
                if (chart.isDatasetVisible(datasetIndex)) {
                    utmost = datasetIndex
                        dataset.data.forEach((value, index) => {
                            totals[index] = (totals[index] || 0) + value
                        })
                }
            })
            chart.$totalizer = {
            totals: totals,
            utmost: utmost
        }
    }
} */
var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
  };

  var chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(231,233,237)'
  };

  var color = Chart.helpers.color;
  var config = {
    type: 'bar',
    data: {
      labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
      datasets: [{
        label: "My First dataset",
        backgroundColor: color(chartColors.red).alpha(0.2).rgbString(),
        borderColor: chartColors.red,
        pointBackgroundColor: chartColors.red,
        data: [
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor()
        ]
      }, {
        label: "My Second dataset",
        backgroundColor: color(chartColors.blue).alpha(0.2).rgbString(),
        borderColor: chartColors.blue,
        pointBackgroundColor: chartColors.blue,
        data: [
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor()
        ]
      }, {
        label: "My Third dataset",
        backgroundColor: color(chartColors.orange).alpha(0.2).rgbString(),
        borderColor: chartColors.orange,
        pointBackgroundColor: chartColors.orange,
        data: [
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor(), 
          randomScalingFactor()
        ]
      },]
    },
    options: {
      legend: {
        position: 'top',
        labels: {
          fontColor: 'rgb(255, 99, 132)'
        },
        onHover: function(event, legendItem) {
          document.getElementById("canvas").style.cursor = 'pointer';
        },
        onClick: function(e, legendItem) {
          var index = legendItem.datasetIndex;
          var ci = this.chart;
          var alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden;       
          var anyOthersAlreadyHidden = false;
          var allOthersHidden = true;

          // figure out the current state of the labels
          ci.data.datasets.forEach(function(e, i) {
            var meta = ci.getDatasetMeta(i);
            
            if (i !== index) {
              if (meta.hidden) {
                anyOthersAlreadyHidden = true;
              } else {
                allOthersHidden = false;
              }
            }
          });
          
          // if the label we clicked is already hidden 
          // then we now want to unhide (with any others already unhidden)
          if (alreadyHidden) {
            ci.getDatasetMeta(index).hidden = null;
          } else { 
            // otherwise, lets figure out how to toggle visibility based upon the current state
            ci.data.datasets.forEach(function(e, i) {
              var meta = ci.getDatasetMeta(i);

              if (i !== index) {
                // handles logic when we click on visible hidden label and there is currently at least
                // one other label that is visible and at least one other label already hidden
                // (we want to keep those already hidden still hidden)
                if (anyOthersAlreadyHidden && !allOthersHidden) {
                  meta.hidden = true;
                } else {
                  // toggle visibility
                  meta.hidden = meta.hidden === null ? !meta.hidden : null;
                }
              } else {
                meta.hidden = null;
              }
            });
          }

          ci.update();
        },
      },
      tooltips: {
        custom: function(tooltip) {
          if (!tooltip.opacity) {
            document.getElementById("canvas").style.cursor = 'default';
            return;
          }
        }
      },
      title: {
        display: true,
        text: 'Chart.js Radar Chart'
      },
      scale: {
        ticks: {
        beginAtZero: true
        }
      }
    } /*,
      plugins: [totalizer] */
  };

  window.onload = function() {
    window.myRadar = new Chart(document.getElementById("canvas"), config);
  };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:40%">
  <canvas id="canvas"></canvas>
</div>

Как вывести итог для выбранной легенды

...