在ChartJs中自定义onClick函数中使用图例onClick默认函数

问题描述 投票:0回答:1

我想在单击标签时更新饼图中的百分比值,因此我可以将默认图例 onClick 函数添加到也更新百分比值的自定义函数中。

ChartJs 版本 = 3.9.1

这些是我的图表选项:

    options: {
      responsive: true,
      plugins:{
        legend: {
          onClick : function (e, legendItem, legend){
            chart.defaults.plugins.legend.onClick(this, e, legendItem)
          },
        },
        title: {
          display: true,
            text: name.charAt(0).toUpperCase() + name.slice(1),
            },
        datalabels: {
          formatter: (value, ctx) => {
              let sum = 0;
              let dataArr = ctx.chart.data.datasets[0].data;
              dataArr.map(data => {
                sum += data;
            });
            let percentage = (value*100 / sum).toFixed(2)+"%";
            return percentage;
        },
        color: '#fff',
      },
    },
      
  },

我收到以下错误:

未捕获类型错误:无法读取未定义的属性(读取“isDatasetVisible”)

编辑

使用此图例选项(我从源代码复制并粘贴了单击默认功能)

legend: {
  onClick : function (e, legendItem, legend){
    const index = legendItem.datasetIndex;
    const ci = legend.chart;
    if (ci.isDatasetVisible(index)) {
      ci.hide(index);
      legendItem.hidden = true;
    } else {
      ci.show(index);
      legendItem.hidden = false;
    };
  },

我收到以下错误: 未捕获的类型错误:无法读取 null 的属性(读取“_resolveAnimations”)

javascript chart.js
1个回答
2
投票

我终于解决了这个问题。看来“chart.defaults.plugins.legend.onClick”已经过时了。 “onClick”函数真正的作用是:

    legend.chart.toggleDataVisibility(legendItem.index);
    legend.chart.update();

所以我复制此行并粘贴到 options.plugins.legend.onClick 中

© www.soinside.com 2019 - 2024. All rights reserved.