Highcharts线性半径填充，带固定上限

我希望达到一个类似的效果

但是，上面的示例使用了相对于可见绘图的渐变。因此，

0

停止颜色用于可见绘图的峰值（无论峰值的实际值如何），而

1

停止颜色用于底部

假设我的数据范围为0到100（例如百分比）。我希望能够指定“暗”始终用于值100，而“亮”始终用于值0

所以，如果我的可见光数据仅在0到20之间，那么这一切都充满了浅色的渐变色（在渐变光谱的低端）。。。我不想让它从光充满到完全黑暗

---

有没有办法做到这一点？

要达到这样的梯度，你需要做一些事情

梯度单位应切换到

x1、y1、x2、y2应指向绘图区域开始和结束的点

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

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

例如：

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

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

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

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

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

---

示例：

要实现这样的梯度，您需要做一些事情

梯度单位应切换到

x1、y1、x2、y2应指向绘图区域开始和结束的点

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

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

例如：

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

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

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

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

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

---

示例：

这是一个可以独立设置轴高度和值以与深色关联的版本：这是一个可以独立设置轴高度和值以与深色关联的版本：