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

guykilcj  于 2023-01-17  发布在  Chart.js
关注(0)|答案(1)|浏览(183)

我希望在单击标签时更新饼图中的百分比值,因此我认为可以将默认的图例onClick函数添加到也更新百分比值的自定义函数中。
图表版本= 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")

3hvapo4f

3hvapo4f1#

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

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

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

相关问题