如何在Highcharts 9.0折线图添加渐变填充？开启styledMode=true无效

当开启styledMode=true时，Highcharts会切换到CSS样式驱动模式，图表元素的填充、颜色等样式会被CSS规则覆盖，直接在series配置中定义的渐变填充会失效。针对Highcharts 9.0版本，可通过以下两种方式解决：

方法一：通过CSS+SVG渐变实现 #

1. 在页面中添加隐藏的SVG渐变定义：

<svg style="display: none;">
  <defs>
    <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#7cb5ec" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#7cb5ec" stop-opacity="0"/>
    </linearGradient>
  </defs>
</svg>

2. 在CSS中为折线图的填充区域绑定该渐变：

.highcharts-area {
  fill: url(#areaGradient);
}

方法二：通过图表加载事件手动设置样式 #

如果需要保留系列的交互功能，可在图表加载完成后手动修改填充元素的样式：

chart: {
  styledMode: true,
  events: {
    load: function() {
      // 为第一个系列的填充区域设置渐变
      this.series[0].area.attr({
        fill: 'url(#areaGradient)'
      });
    }
  }
}

同样需要提前在页面中定义好上述SVG渐变。

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