Highcharts 图例项删除线效果：分步指南

javascript

2024-03-06 12:25:07

如何在 Highcharts 中为图例项添加删除线效果？

简介

Highcharts 是一个流行的 JavaScript 图表库，提供了广泛的图表类型和交互功能。其中一项交互功能是能够为图例项（即图表中表示不同数据集的符号）添加删除线效果。这可以用来视觉上指示已禁用或隐藏了相应的数据集。

实现删除线效果

要为 Highcharts 图例项添加删除线效果，请按照以下步骤操作：

获取图例项的原始颜色： 在图例项的单击事件处理程序中，使用 point.options.originalColor 属性获取图例项的原始颜色。
切换颜色： 使用 this.color 和 newColor 变量在灰色和原始颜色之间切换。
切换数据标签可见性： 根据 newColor 值启用或禁用数据标签。如果图例项变为灰色，则禁用数据标签；如果恢复为原始颜色，则启用数据标签。
更新图例项： 最后，使用 update() 方法更新图例项的颜色和数据标签设置。

代码示例

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
            }
          });
          
          return false;
        }
      }
    },
    events: {
      afterInit: function() {
        // 为每个点存储原始颜色
        this.points.forEach(function(point) {
          point.options.originalColor = point.color;
        });
      }
    }
  }],
  accessibility: {
    enabled: false,
  },
});