Chartjs 图例 onclick 没有删除线答案

【问题标题】：Chartjs legend onclick doesn't strikethroughChartjs 图例 onclick 没有删除线
【发布时间】：2022-12-01 03:50:09
【问题描述】：

正如您在下面的示例中看到的，点击图例并不会通过图例引人注目。是什么原因造成的？

  const autocolors = window['chartjs-plugin-autocolors'];

        Chart.register(autocolors);

        var options = {
          type: 'line',
          data: {
            labels: ["0", "1", "2", "3", "4", "5"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3]
              },
              {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7]
              },
              {
                label: '# of People',
                data: [3, 1, 15, 4, 9, 12]
              }
            ]
          },
          options: {
            plugins: {
              autocolors: {
                 mode: 'dataset'
              },

    legend: {
                onClick: (evt, legendItem, legend) => {
                  //console.log(legendItem);
                  const index = legendItem.datasetIndex;
                  const ci = legend.chart;
                  
                  legend.chart.data.datasets.forEach((d, i) => {
                    ci.hide(i);
                    d.hidden = true;
                  })

                  ci.show(index);
                  legendItem.hidden = false;

                  ci.update();
                },
                labels: {
                  generateLabels: (chart) => {
                    const datasets = chart.data.datasets;

                    legends = [];
                    for(let i=0;i<datasets.length;i++){
                      //console.log(datasets[i].data);
                      let total = datasets[i].data.reduce((total, item) => total + item);
                      //console.log(datasets[i].borderColor);
                      legends.push({text: `${datasets[i].label} (${total.toLocaleString()})`, fillStyle: datasets[i].borderColor, datasetIndex:i});
                    }

                    return legends;
                  }
                }
              }
            }
          }
        }

        var ctx = document.getElementById('chartJSContainer').getContext('2d');
        new Chart(ctx, options);

        <body>
          <canvas id="chartJSContainer" width="600" height="400"></canvas>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
        </body>

【问题讨论】：

标签： chart.js

【解决方案1】：

这是因为您从未在您的 generateLabels 中设置 hidden 属性，因此 chart.js 不知道要删除哪些标签，因为它们从未被图例插件隐藏。

const autocolors = window['chartjs-plugin-autocolors'];

Chart.register(autocolors);

var options = {
  type: 'line',
  data: {
    labels: ["0", "1", "2", "3", "4", "5"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7]
      },
      {
        label: '# of People',
        data: [3, 1, 15, 4, 9, 12]
      }
    ]
  },
  options: {
    plugins: {
      autocolors: {
        mode: 'dataset'
      },

      legend: {
        onClick: (evt, legendItem, legend) => {
          //console.log(legendItem);
          const index = legendItem.datasetIndex;
          const ci = legend.chart;

          legend.chart.data.datasets.forEach((d, i) => {
            ci.hide(i);
            d.hidden = true;
          })

          ci.show(index);
          legendItem.hidden = false;

          ci.update();
        },
        labels: {
          generateLabels: (chart) => {
            const datasets = chart.data.datasets;

            legends = [];
            for (let i = 0; i < datasets.length; i++) {
              const meta = chart.getDatasetMeta(i)
              let total = datasets[i].data.reduce((total, item) => total + item);
              legends.push({
                text: `${datasets[i].label} (${total.toLocaleString()})`,
                fillStyle: datasets[i].borderColor,
                datasetIndex: i,
                strokeStyle: 'red',
                hidden: !meta.visible
              });
            }

            return legends;
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
</body>

【讨论】：