如何在不中断其正常工作的情况下触发ChartJS图例onClick

e0bqpujr 于 2023-11-18 发布在 Chart.js

关注(0)|答案(2)|浏览(152)

当图例在chart.js饼（v2.5.0）图表中单击时，我想记录单击的图例。为此，我向图例添加了onClick函数，并在其中调用默认函数Chart.defaults.global.legend.onClick。但它变得错误，图表没有更新。
这是我用过的配置

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

字符串
在获取此错误时单击图例
未捕获的TypeError：无法读取未定义的属性“_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);
};

型

chart.js

来源：https://stackoverflow.com/questions/67604079/how-to-trigger-chartjs-legend-onclick-with-out-interrupting-its-normal-working

2条答案

按热度按时间

b1zrtrql1#

它几乎看起来像是文档的例子是错误的，似乎他们没有给予图表，这就是为什么它失败，如果你自己提供图表，并编写完整的onclick它确实工作
范例：

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);

个字符

赞(0）回复(0）举报 2023-11-18

qojgxg4l2#

您可以通过使用以下行更新图例来更新图例onClick。

@ViewChild('barChart') barChart: BaseChartDirective;

legend: {
    labels: {
    onClick: (event, barLegendItem, legend) => {
      const datasetIndex = barLegendItem.datasetIndex;
      const scatterDataset = this.barChartData.datasets[datasetIndex - this.noOfInnings];
      const barDataset = this.barChartData.datasets[datasetIndex];
      scatterDataset.hidden = !scatterDataset.hidden;
      barDataset.hidden = !barDataset.hidden;
      legend.chart.update(this.barChart);
    }
  }

HTML :
canvas id="chart1" class="w-100 h-100" baseChart
            #barChart
            [data]="barChartData"
            [options]="barChartOptions"
            [plugins]="barChartPlugins"
            [legend]="barChartLegend">
    </canvas>

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

如何在不中断其正常工作的情况下触发ChartJS图例onClick

2条答案

相关问题

热门标签

最新问答