Highcharts 面积图渐变填充答案

【问题标题】：Highcharts Area chart gradient fillHighcharts 面积图渐变填充
【发布时间】：2016-07-09 20:17:16
【问题描述】：

如何使用 Highcharts 获得这样的图表。我无法像这样获得图表的渐变填充：

【问题讨论】：

【解决方案1】：

我认为您可以在图表中使用线性渐变。您可以在 Highcharts 网站上找到有关此渐变的信息：http://www.highcharts.com/docs/chart-design-and-style/colors

  fillColor: {
    linearGradient: {
      x1: 0,
      x2: 0,
      y1: 0,
      y2: 1
    },
    stops: [
      [0, Highcharts.getOptions().colors[2]],
      [0.8, hexToRgba(Highcharts.getOptions().colors[2], 0)]
    ]
  }

您可以使用 stacking: normal 让您的区域系列彼此叠放，并使用 marker.fillColor 在所有标记上填充白色。

plotOptions: {
  area: {
    stacking: 'normal',
    marker: {
      symbol: 'circle',
      lineWidth: 2,
      fillColor: 'white',
      lineColor: null,
    }
  }
},

您可以在这里找到它如何工作的示例： http://jsfiddle.net/bLdhefff/6/

最好的问候。

【讨论】：