如何将渐变应用于 Highcharts 中的矩形答案

【问题标题】：How to apply a gradient to a rectangle in Highcharts如何将渐变应用于 Highcharts 中的矩形
【发布时间】：2016-06-16 07:17:46
【问题描述】：

我想在我的 Highcharts 图表中添加一个矩形，以突出显示方向（更热、更冷）。为此，我想使用渐变 - 从白色到微红色，从白色到蓝色。

但我不明白如何将SVG gradient style 应用于 Highcharts 中使用的代码。我的看起来像这样 (here is a fiddle)

var rect = chart.renderer.rect(0, 90, 45, 273, 0).attr({
    fill: 'none',
    stroke: '#009900',
    'stroke-width': 1
}).add();

如何在此处添加渐变样式？

【问题讨论】：

标签： css svg highcharts gradient

【解决方案1】：

您可以定义渐变对象并将其传递给填充属性：

Fiddle

 var gradient = {
         linearGradient: [0, 0, 0, 400],
         stops: [
             [0, '#000'],
             [1, '#ff0000']
         ]
     };
     var rect = chart.renderer.rect(0, 90, 45, 273, 0).attr({
         fill: gradient,
         stroke: '#009900',
         'stroke-width': 1
     }).add();

【讨论】：

酷。非常感谢！但是，我没有成功找出这四个参数代表什么。你能指导我找到描述这些的文档吗？我添加了第二个蓝色矩形 (fiddle here)，但我对必须定义的设置感到困惑。
@luftikus143，看看这个highcharts.com/docs/chart-design-and-style/colors。这可能会帮助你
感谢您的提示。它帮助了我，我找到了一种方法，虽然我不能说我理解这四个值的作用。

【解决方案2】：

您需要像下面这样定义并添加到 DOM 中。

<defs>
<linearGradient id="linear" y2="0%" x2="100%" y1="0%" x1="0%">
<stop stop-color="#05a" offset="0%">
<stop stop-color="#a55" offset="50%">
<stop stop-color="#0a5" offset="100%">
</linearGradient>
</defs>
<rect stroke-width="1" stroke="#009900" fill="url(#linear)" height="273" width="45" y="90" x="0">

参考：http://vanseodesign.com/web-design/svg-linear-gradients/

【讨论】：

是的，这也是我在上述文档中所说的。但这不适用于使用 Highcharts。我的问题是如何结合使用 SVG 和 Highcharts chart.renderer.rect。有一个可以附加的属性列表；但是在这里使用渐变的方法是什么？