Vue Chart.js图例点击时无删除线

huangapple go评论69阅读模式
英文:

vue chartjs no strikethrough on legend click

问题

I've recently upgraded my site from vue 2 to vue 3 and as part of that I had to upgrade the versions of vue-chartjs and chartjs too.

Now after I change the legend text of my pie chart using the generateLabels option (shown below), the strikethrough after clicking on a legend to hide the segment no longer works.

plugins: {
  legend: {
    labels: {
      generateLabels: chart => {
        const data = chart.data;

        if (data.labels.length && data.datasets.length) {
          return data.labels.map((label, i) => {
            const meta = chart.getDatasetMeta(0);
            const style = meta.controller.getStyle(i);

            return {
              text: `${label}: ${this.isMoney ? StringHelper.FormatNumber(data.datasets[0].data[i], true) : data.datasets[0].data[i]}`,
              fillStyle: style.backgroundColor,
              strokeStyle: style.borderColor,
              lineWidth: style.borderWidth,
              hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,
              index: i,
            };
          });
        }

        return [];
      },
      padding: 30,
      usePointStyle: true,
    },
    position: 'left',
  },
}

Example Stackblitz

How do I get the strikethrough again? I tried adding the onclick from this answer to the legend, but that just killed the pie chart completely.

By the looks of things - it's because the meta no longer has the hidden property in meta.data[i].hidden as it is now just undefined

Click Stackblitz

英文:

I've recently upgraded my site from vue 2 to vue 3 and as part of that I had to upgrade the versions of vue-chartjs and chartjs too.

Now after I change the legend text of my pie chart using the generateLabels option (shown below), the strikethrough after clicking on a legend to hide the segment no longer works.

<!-- language: lang-js -->

plugins: {
  legend: {
    labels: {
      generateLabels: chart =&gt; {
        const data = chart.data;

        if (data.labels.length &amp;&amp; data.datasets.length) {
          return data.labels.map((label, i) =&gt; {
            const meta = chart.getDatasetMeta(0);
            const style = meta.controller.getStyle(i);

            return {
              text: `${label}: ${this.isMoney ? StringHelper.FormatNumber(data.datasets[0].data[i], true) : data.datasets[0].data[i]}`,
              fillStyle: style.backgroundColor,
              strokeStyle: style.borderColor,
              lineWidth: style.borderWidth,
              hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,
              index: i,
            };
          });
        }

        return [];
      },
      padding: 30,
      usePointStyle: true,
    },
    position: &#39;left&#39;,
  },
}

Example Stackblitz

How do I get the strikethrough again? I tried adding the onclick from this answer to the legend, but that just killed the pie chart completely.

By the looks of things - it's because the meta no longer has the hidden property in meta.data[i].hidden as it is now just undefined

Click Stackblitz

答案1

得分: 0

看起来现在你可以通过查看 chart 对象的 _hiddenIndices 属性来确定一个段是否被隐藏:

hidden: chart._hiddenIndices[i] === true,

工作示例

另一种方法是使用 getDataVisibility,根据 yoduh 的评论:

hidden: !chart.getDataVisibility(i),

工作示例

英文:

It looks like you can tell if a segment is hidden now by looking at the chart object using the _hiddenIndices property:

hidden: chart._hiddenIndices[i] === true,

Working blitz

Alternate way using getDataVisibility per yoduh's comment:

hidden: !chart.getDataVisibility(i),

Working blitz

huangapple
  • 本文由 发表于 2023年2月23日 22:38:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/75546296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定