Highcharts区域图表渐变填充 [英] Highcharts Area chart gradient fill

问题描述

我怎样才能用Highcharts得到这样的图表。
我无法像这样得到图表的渐变填充：

解决方案

我认为你可以在图表的情况下使用线性渐变。您可以在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）] 
] 
} 
  

您可以使用堆叠：normal来将您的区域系列放在另一个之上，并使用marker.fillColor制作白色填充所有标记。

  plotOptions：{
 area：{
 stacking：'normal '，
标记：{
符号：'circle'，
 lineWidth：2，
 fillColor：'white'，
 lineColor：null，
} 
} 
}，
  

可以找到一个例子如何工作：
http://jsfiddle.net/bLdhefff/6/

最好的问候。

How can I get chart like this with Highcharts. I can't get gradient fill of chart like this:

解决方案

I think that you can use linear gradient in case of your chart. You can find information about this gradient on Highcharts website: 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)]
    ]
  }

You can use stacking: normal to have your area series on top of each other and marker.fillColor to make white fill on all of your markers.

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

Here you can find an example how it can work: http://jsfiddle.net/bLdhefff/6/

Best regards.

这篇关于Highcharts区域图表渐变填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！