Highcharts区域图表渐变填充

时间:2016-07-09 20:17:17

标签: highcharts

如何使用Highcharts获取此类图表。 我不能像这样获得图表的渐变填充:

chart

1 个答案:

答案 0 :(得分: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/

最好的问候。