Highcharts技术问题：如何为图例项添加删除线效果？

你的需求是点击饼图图例项时，不仅切换对应扇区的灰色/原色，还要同步给图例文字添加/移除删除线。可以通过操作图例项的DOM元素样式来实现，以下是修改后的完整代码：

Highcharts.chart('container', {
  series: [{
    type: 'pie',
    data: [1, 2, 3, 4],
    showInLegend: true,
    point: {
      events: {
        legendItemClick: function() {
          var originalColor = this.options.originalColor;
          var newColor = (this.color === 'gray') ? originalColor : 'gray';
          var showDataLabels = (newColor !== 'gray');

          this.update({
            color: newColor,
            dataLabels: {
              enabled: showDataLabels
            }
          });

          // 切换图例项的删除线样式
          var legendTextElement = this.legendItem.element.querySelector('.highcharts-legend-text');
          if (newColor === 'gray') {
            legendTextElement.style.textDecoration = 'line-through';
          } else {
            legendTextElement.style.textDecoration = 'none';
          }
          
          return false;
        }
      }
    },
    events: {
      afterInit: function() {
        this.points.forEach(function(point) {
          point.options.originalColor = point.color;
        });
      }
    }
  }],
  accessibility: {
    enabled: false,
  },
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

关键改动说明 #

• 通过this.legendItem.element定位到当前图例项的DOM容器，再筛选出内部的文字元素.highcharts-legend-text
• 根据扇区颜色的切换状态，给文字元素设置text-decoration: line-through（添加删除线）或none（移除删除线）
• 保留了你原本的扇区颜色切换、数据标签显示/隐藏逻辑

内容的提问来源于stack exchange，提问作者newuser