Блог

Главная - Вопросы по программированию - Как запустить ChartJS legend onClick, не прерывая его нормальную работу

Как запустить ChartJS legend onClick, не прерывая его нормальную работу

#javascript #chart.js

Вопрос:

Когда легенды в chart.js круговая диаграмма (v2.5.0) — это щелчок, который я хочу записать, на какую легенду нажимается. Для этого я добавляю функцию onClick в легенду и вызываю функцию по умолчанию Chart.defaults.global.легенда.Нажмите на него еще раз. но это становится ошибкой, и диаграмма не обновляется.

Это конфигурация, которую я использовал

 "legend": {
    "position": "top",
    "onClick": function(e,l){
            console.log("l.text");
            Chart.defaults.global.legend.onClick.call(this, e, l);
    }
}

При нажатии на легенду в получении этой ошибки

Неперехваченная ошибка типа: Не удается прочитать свойство ‘_meta’ неопределенного

Попробовал и это тоже. это тоже не сработало.

 var original = Chart.defaults.global.legend.onClick;
Chart.defaults.global.legend.onClick = function(e, legendItem) {
  /* do custom stuff here */
  original.call(this, e, legendItem);
};

Ответ №1:

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

Пример:

 const defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function(e, legendItem) {
  alert(legendItem.text)
  const index = legendItem.index;


  const {
    type
  } = chart.config;
  if (type === 'pie' || type === 'doughnut') {
    // Pie and doughnut charts only have a single dataset and visibility is per item
    for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen;   i) {
      meta = chart.getDatasetMeta(i);
      // toggle visibility of index if exists
      if (meta.data[index]) {
        meta.data[index].hidden = !meta.data[index].hidden;
      }
    }
  } else {
    const index = legendItem.datasetIndex;
    const ci = this.chart;
    const meta = ci.getDatasetMeta(index);

    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

    // We hid a dataset ... rerender the chart
    ci.update();
  }
  chart.update();

};

const options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }, {
      label: '# of Votes2',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }, {
      label: '# of Votes3',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }, {
      label: '# of Votes4',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      onClick: newLegendClickHandler
    }

  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options); 
 <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Метки: ,