Highcharts：如何自动将系列颜色设为阴影颜色？

你完全不需要逐个给每个Series硬编码阴影颜色！这里有两个优雅的方案，能自动让阴影颜色匹配系列本身的颜色，彻底摆脱重复的硬编码工作：

方法1：利用Chart的load事件动态赋值 #

在图表加载完成后，遍历所有系列，将每个系列的阴影颜色设置为该系列自身的color属性。不管你是用自定义主题的颜色数组，还是Highcharts默认的颜色集，都能自动匹配：

Highcharts.theme = {
  colors: ['#3498db', '#e74c3c'],
  plotOptions: {
    line: {
      lineWidth: 3,
      shadow: {
        width: 8,
        opacity: 0.2
        // 这里不指定color，后续动态赋值
      },
      marker: { enabled: false }
    }
  }
};

Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
  }],
  chart: {
    events: {
      load: function() {
        // 遍历所有系列，设置阴影颜色为系列自身颜色
        this.series.forEach(series => {
          if (series.options.shadow) {
            series.update({
              shadow: {
                ...series.options.shadow,
                color: series.color
              }
            }, false); // false表示不立即重绘
          }
        });
        this.redraw(); // 最后统一重绘提升性能
      }
    }
  }
});

方法2：扩展Highcharts的Series原型（全局生效） #

如果你希望所有项目中的Highcharts图表都自动应用这个规则，可以扩展Series的原型，让所有系列在初始化时自动匹配阴影颜色：

// 扩展Series原型，覆盖初始化逻辑
Highcharts.wrap(Highcharts.Series.prototype, 'init', function(proceed, chart, options) {
  // 先执行原初始化方法
  proceed.apply(this, arguments);
  
  // 如果配置了shadow但未指定color，自动设置为系列颜色
  if (this.options.shadow && !this.options.shadow.color) {
    this.update({
      shadow: {
        ...this.options.shadow,
        color: this.color
      }
    }, false);
  }
});

// 之后正常配置主题和图表即可
Highcharts.theme = {
  colors: ['#3498db', '#e74c3c'],
  plotOptions: {
    line: {
      lineWidth: 3,
      shadow: {
        width: 8,
        opacity: 0.2
      },
      marker: { enabled: false }
    }
  }
};

Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
  }]
});

原理说明 #

Highcharts会自动为每个系列分配颜色（无论是你主题里定义的colors数组，还是默认的颜色集合），每个系列实例的color属性就是当前使用的颜色值。我们只需要把这个值同步给阴影的color属性，就能实现自动匹配，后续新增系列也不需要手动修改配置。

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