如何在图表线上方添加渐变颜色？

Question

Here我通过反转y轴获得图表区域顶部的渐变颜色。检查下面的图片。

   yAxis: {
            reversed: true,
            showFirstLabel: false,
            showLastLabel: true
         }

我不想扭转y轴，如果我正在扭转y轴，我的图表也会反转。我想要在图表行顶部的渐变颜色，而不使用此反转的Y轴。如果在highcharts中有任何其他选项，建议我。

任何人都可以帮我解决这个问题。

我正在处理随机数据。在这种情况下，只有数据行进的区域应该得到渐变颜色，除了聊天中的数据之外的空白空间不应该得到渐变颜色。

根据@DaMaxContent的回答，输出将如下图所示。

我不想要填充图表数据其他区域的渐变。你能帮我解决这个问题。

Answer 1

分解：

  

您可以使用gridZindex和backgroundColor / fillColor属性   产生预期的效果。唯一的问题是网格有   在图表上显示。以下是解决方案： DEMO

以下是它背后的代码：

margin-top

如果您希望摆脱边缘颜色区域，可以使用chart: { type: 'area', backgroundColor: { //<<--that is what you are using as fill color linearGradient : { x1: 0, y1: 1, x2: 0, y2: 0 }, stops : [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] } }, rangeSelector: { selected: 1 }, title: { text: 'AAPL Stock Price' }, yAxis: { reversed: false, showFirstLabel: false, showLastLabel: true, gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it }, series: [{ name: 'AAPL Stock Price', data: data, threshold: null, fillColor : "#fff", //<<--fill color under the line to simulate effect zIndex: 1000, tooltip: { valueDecimals: 2 } }] 摆脱图形边距，然后使用chart: { [... ,] margin: 0 [, ...] }填充作为图形边距。

更多信息：

  

highcharts样式指南：

     

http://www.highcharts.com/docs/chart-design-and-style/design-and-style

     

网格Z索引：

     

http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm

     

背景颜色

     

Changing HighCharts background color?

     

（替代bg颜色）绘制背景颜色（仅主图的bg颜色）

     

http://api.highcharts.com/highcharts#chart.plotBackgroundColor