如何在高图中的一个系列中设置多种颜色

Question

我们可以根据值为高图的列表图表中的系列设置多种颜色。对于例如如果一个系列正在启动，它应该是绿色的，如果它在阈值限制颜色后的结尾应该是同一系列中的红色。 sample columnrange chart

我尝试使用下面的代码更改颜色，但不是从底部到顶部设置不同的颜色：jsfiddle

{
        linearGradient: merge(perShapeGradient),
        stops: [
        [0, 'green'],
        [1, 'red']
    ]
}

任何人都可以帮助我。

Answer 1

在这种情况下，使用渐变着色是相当困难的任务。

解决方法：

如果点越过定义颜色变化的值，则可以分割点：

{
    var series = this.series[0],
      points = series.points,
      newPoints = [];

    points.forEach((point) => {

      // add x value to options
      point.options.x = point.x;

      if (point.low < yThreshold && point.high > yThreshold) {
        // split the point
        newPoints.push($.extend({}, point.options, {
          low: point.low,
          high: yThreshold
        }), $.extend({}, point.options, {
          low: yThreshold,
          high: point.high
        }));

      } else {
        newPoints.push(point.options);
      }
    });

    // color the points
    newPoints.forEach(function(pointOptions) {
      if (pointOptions.high <= yThreshold) {
        pointOptions.color = '#C0FFEE';
      } else {
        pointOptions.color = '#BADA55';
      }
    });

    series.setData(newPoints);

  }   

演示： http://jsfiddle.net/BlackLabel/jfguhget/