Highcharts非单调数据面积图重叠区域填充问题求助

问题代码 #

JavaScript 代码 #

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  plotOptions: {
    series: {
      connectNulls: false,
      // stacking: 'normal'
    }
  },
  
  series: [{
    fillOpacity: 0.75,
    data: [
      { x: 0, y: 29.9 },
      { x: 1, y: 71.5 },
      { x: 3, y: null },
      { x: 4.3, y: 129.2, color: 'red' },
      { x: null, y: null },
      { x: null, y: null },
      { x: 8, y: 216.0, color: 'yellow' },
      { x: 9, y: 135.6, color: 'purple' },
      { x: 7.2, y: 148.5, color: 'lime' },
      { x: 12, y: 216.4 },
      { x: 14, y: 194.1 }
    ]
  }]
});

HTML 代码 #

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

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

问题描述 #

绘制包含非单调数据的Highcharts面积图时遇到以下问题：

• 红色数据点对应的区域未填充为蓝色
• 交叉的黑色条纹区域无法通过透明度呈现叠加效果

观察到Highcharts似乎采用类似奇偶填充的规则，但官方文档无相关说明。

问题效果示意图：

解决方案 #

1. 统一填充颜色 #

单个数据点设置的color仅控制线条和点的颜色，而非填充色。要让所有区域统一填充蓝色，直接在series中配置fillColor：

series: [{
  fillOpacity: 0.75,
  fillColor: 'blue', // 统一填充色
  data: [
    // 保留原数据点的color设置可单独控制点的颜色
    { x: 0, y: 29.9 },
    { x: 1, y: 71.5 },
    { x: 3, y: null },
    { x: 4.3, y: 129.2, color: 'red' },
    // ... 其余数据
  ]
}]

如果不需要单独控制点的颜色，直接设置color和fillColor为蓝色即可覆盖所有点和线条颜色。

2. 实现重叠区域透明度叠加 #

Highcharts面积图默认使用SVG的nonzero（非零环绕）填充规则，导致交叉区域出现镂空。要实现叠加效果，需将交叉的路径拆分为独立的series：

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  plotOptions: {
    series: {
      connectNulls: false,
      fillOpacity: 0.75,
      color: 'blue',
      fillColor: 'blue'
    }
  },
  
  series: [
    // 第一段独立区域
    { data: [{x:0,y:29.9}, {x:1,y:71.5}, {x:3,y:null}] },
    // 第二段独立区域
    { data: [{x:4.3,y:129.2}, {x:null,y:null}] },
    // 第三段独立区域
    { data: [{x:7.2,y:148.5}, {x:8,y:216.0}, {x:9,y:135.6}, {x:12,y:216.4}, {x:14,y:194.1}] }
  ]
});

每个独立series使用相同的填充色和透明度，重叠区域的透明度会自然叠加，呈现更深的蓝色效果。

补充说明 #

Highcharts的填充规则遵循SVG标准，默认fill-rule为nonzero，官方文档未专门针对面积图说明此规则，但通过拆分series的方式可绕过该限制，实现预期的叠加效果。

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