具有固定上限的 Highcharts linearGradient 填充

Question

我希望实现类似于 this example 中的效果。

但是，上面的示例使用了相对于可见图的渐变。因此，0 停止色用于可见图的峰值（无论峰值的实际值如何），1 停止色用于底部。

假设我有范围从 0 到 100 的数据（例如百分比）。我希望能够指定 "dark" 始终用于值 100，而 "light" 始终用于值 0。

所以，如果我的可见数据范围仅从 0 到 20，那么这一切都充满了浅色渐变颜色（在渐变光谱的低端）...我不希望它从亮到完全暗填充。

有什么方法可以实现吗？

Answer 1

要实现这样的渐变，您需要做一些事情。

梯度单位应切换为 userSpaceOnUse。
x1, y1, x2, y2 应指向绘图区域开始和结束的点。

你不知道绘图区域是什么，所以你必须在加载事件上设置渐变。

function() {
  this.series[0].update({
    fillColor: {
      linearGradient: [0, 0, 0, this.plotHeight]
    }
  });
}

示例：http://jsfiddle.net/qhuee8uf/1/

现在，渐变已经固定了 x/y 属性，这意味着渐变将不会响应。要获得适用于调整大小图表的渐变，您应该在重绘事件上重新计算渐变。

此外，我发现更新系列中的渐变不会更新渐变，而是会创建一个新渐变 - 这可能不是最好的行为。

相反，您可以直接修改渐变属性

function adjustGradient() {
  document.getElementsByTagName('linearGradient')[0].setAttributeNS(null, 'y2', this.plotHeight);
}

chart: {
  events: {
    load: adjustGradient,
    redraw: adjustGradient
  }
},

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

具有固定上限的 Highcharts linearGradient 填充

Highcharts linearGradient fill with fixed upper bound

highcharts

linear-gradients