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

Question

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

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

我不想反转 y 轴，如果我反转 y 轴，我的图表也会反转。我想要在不使用此反向 Y 轴的情况下位于图表线顶部的渐变颜色。如果 highcharts 中有任何其他选项，请建议我。

谁能帮我解决这个问题。

我正在处理实时随机数据。在这种情况下，只有数据经过的区域应该获得渐变色，聊天中数据以外的空白区域不应获得渐变色。

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

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

Answer 1

分解:

您可以使用 gridZindex 和 backgroundColor/fillColor 属性来产生所需的效果。唯一的问题是网格必须显示在图表上。

解决方案:

DEMO

背后的代码:

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?

• (替代背景颜色)绘图背景颜色(*主图的背景颜色):

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

^{*范围选择器区​​域不会受到影响}