分解：

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 [, ...] }摆脱图形边距，然后使用container's填充作为图形边距。

更多信息：

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

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

Answer 2

为了满足您要求的各种标准，我将通过创建一个虚拟系列来创建渐变效果来实现这一目标。

示例结果：

http://www.jerriepelser.com/blog/moving-entity-framework-7-models-to-external-project

在这种情况下，您需要预处理数据，并且需要明确地为y轴指定最大值。

示例代码：

var max = 0;
var data1 = [...your data array...];
var data2 = [];
$.each(data1, function(i,point) {
    max = point > max ? point : max;
});
max = Math.ceil(max * 1.1);
$.each(data1, function(i,point) {
    data2.push((max - point));
});

然后，您需要将该最大值指定为yAxis max proeprty，并且您可能需要设置endOnTick: false，或者使用tickInterval考虑最大解析：

yAxis: { 
  max:max,
  endOnTick:false
}

然后，对于您的虚拟系列，定义背景颜色渐变。我们还会将showInLegend和enableMouseTracking属性设置为false，以便它不会在图例或工具提示中显示：

  {
    data: data2,
    showInLegend:false,
    enableMouseTracking:false,
    fillColor : {
      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')]
      ]
    }

小提琴示例：

这可确保渐变始终与请求的数据匹配。

Answer 3

从this js fiddle可以看到，你必须添加：

series: [{
            name: 'AAPL Stock Price',
            data: data,
            threshold: null,
            fillColor : {
                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')]
                ]
            },
            tooltip: {
                valueDecimals: 2
            }
        }]

有关详细信息，请参阅documentation

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

3 个答案:

分解：

解决方案：

背后的代码：

更多信息：