具有固定上限的Highcharts linearGradient填充 [英] Highcharts linearGradient fill with fixed upper bound

问题描述

我希望获得与但是，以上示例使用了相对于可见图的渐变.因此，0终止色用于可见图的峰值(无论该峰的实际值如何)，而1终止色用于底色.

However, the above example uses a gradient that is relative to the visible plot. So the 0 stop color is used at the peak of the visible plot (whatever the actual value of the peak), and the 1 stop color is used at the base.

说我的数据范围是0到100(例如百分比).我希望能够指定深色"始终用于100值，而浅色"始终用于0值.

Say I have data that can range from 0 to 100 (e.g. a percentage). I want to be able to specify that "dark" is always used for a value of 100, while "light" is always used for a value of 0.

因此，如果我的可见数据范围仅在0到20之间，则全部填充有淡淡的渐变色(在渐变光谱的下端)...我不想填充它从浅到深.

So, if my visible data only ranges from 0 to 20, then this is all filled with a light-ish gradient colour (at the lower end of the gradient spectrum)... I don't want it to be filled from light to fully dark.

有什么方法可以实现这一目标?

Any way to achieve this?

推荐答案

要实现这种渐变，您需要做一些事情.

To achieve such gradient, you need to do a few things.

1. 应将渐变单位切换为 userSpaceOnUse .
2. x1，y1，x2，y2应该指向绘图区域开始和结束的点.

1. Gradient units should be switched to userSpaceOnUse.
2. x1, y1, x2, y2 should point to the points where the plot area starts and ends.

您不知道绘图区域是什么，因此必须在加载事件中设置渐变.

You do not know what would be the plot area, so you have to set the gradient on load event.

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

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

现在，渐变具有固定的x/y属性，这意味着渐变将不会响应.要使渐变与调整大小的图表配合使用，您应该在重绘事件时重新计算渐变.

Now, the gradient has fixed x/y attributes, what means that the gradient will not be responsive. To have a gradient which will work with a resizing chart, you should recalculate gradient on redraw event.

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

Also, I have found that updating gradient in the series does not update the gradient but creates a new one - which might be not be the best behaviour to have.

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

Instead, you can modify the gradient attributes directly

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

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

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

这篇关于具有固定上限的Highcharts linearGradient填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！