Question

我希望获得与this example类似的效果。

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

假设我的数据范围为0到100（例如百分比）。我希望能够指定＆＃34; dark＆＃34;总是用于100的值，而＆＃34; light＆＃34;始终用于值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填充

1 个答案: