highcharts 渐变颜色从负到正条水平答案

【问题标题】：highchart gradient color negative to positive bar horizontalhighcharts 渐变颜色从负到正条水平
【发布时间】：2017-04-30 05:38:18
【问题描述】：

如何做到这一点？在高图中..

horizontal bar with gradient.. red to gray for negative to positive values

【问题讨论】：

您可以根据预处理中的值设置单个条的颜色。在不了解更多细节的情况下，很难说出具体应该做什么。

标签： javascript highcharts colors gradient

【解决方案1】：

如果你已经使用了一个使用颜色轴的 Highcharts 模块，你可以使用它的 tweenColors 函数来找到中间颜色。

如前所述，您必须遍历数据并设置点的颜色。如果您不想使用任何其他模块，则需要找到中间颜色 - 答案可以找到here。

var data = [100, 50, 20, -10],
  min = Math.min.apply(null, data),
  max = Math.max.apply(null, data),
  total = max - min,
  colorMin = new Highcharts.Color('rgb(255, 0, 0)'),
  colorMax = new Highcharts.Color('white'),
  tweenColors = Highcharts.ColorAxis.prototype.tweenColors;

 coloredData = data.map(value => {
   var pos = (value - min) / total;

   return {
     y: value,
     color: tweenColors(colorMin, colorMax, pos)
   };
 });

示例：http://jsfiddle.net/oudktg0o/

【讨论】：