Highcharts页面SVG阴影失效：直线图表仅显示标记无连线

我仔细看了你遇到的问题——给Highcharts图表加SVG阴影后，曲线图表正常，但直线图表只显示数据标记、连线消失。这个问题其实出在直线的path结构和自定义SVG滤镜的渲染逻辑冲突上。

当图表是完全直线时，Highcharts生成的线条path是非常简洁的线段，而你用的drop-shadow滤镜里的feOffset和feGaussianBlur组合，在处理这种极简线条时，会出现渲染层级的异常，导致线条被滤镜效果“盖”住了，所以只能看到标记。

下面给你几个可行的解决方案：

方案1：调整SVG滤镜参数，降低对直线的影响 #

适当减小滤镜的偏移量和模糊程度，让滤镜效果更温和，避免覆盖直线：

<filter id="drop-shadow">
  <feOffset dx="1" dy="1" in="SourceAlpha" result="offset-shadow"/>
  <!-- 把模糊值从2降到1，减少滤镜对细线条的影响 -->
  <feGaussianBlur stdDeviation="1" in="offset-shadow" result="blur-shadow"/>
  <feComposite in="blur-shadow" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadow"/>
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

方案2：强制设置线条和标记的层级 #

通过zIndex明确线条和标记的渲染优先级，确保线条在滤镜之上，标记又在线条之上：

plotOptions: {
  series: {
    // 给线条设置基础层级，保证不被滤镜覆盖
    zIndex: 1,
    marker: {
      // 标记层级高于线条，避免被线条遮挡
      zIndex: 2,
      fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: null
    }
  }
}

方案3：改用Highcharts内置阴影（推荐） #

Highcharts自带的shadow配置对直线、曲线都有更好的兼容性，不需要自己写SVG滤镜，更省心：

plotOptions: {
  series: {
    // 启用内置阴影，还能自定义颜色、偏移量等参数
    shadow: {
      color: 'rgba(0,0,0,0.3)',
      offsetX: 2,
      offsetY: 2,
      opacity: 0.5,
      width: 3
    },
    marker: {
      fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: null
    }
  }
}

调整后，直线图表的连线就能正常显示阴影效果，和曲线图表的表现一致啦。

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