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

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

但我不知道如何将这个函数应用于Highcharts中使用的代码。我的看起来像这样（）

---

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

您需要像下面这样定义并添加到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">

---

参考：

您需要像下面这样定义并添加到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">

---

参考：

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

---

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

---

是的，这也是我在上述文档中所说的。但是，使用海图是行不通的。我的问题是如何结合使用SVG和Highcharts

chart.renderer.rect

。有一个可以附加的属性列表；但是这里使用梯度的方法是什么呢？是的，这也是我在上面提到的文档中所说的。但是，使用海图是行不通的。我的问题是如何结合使用SVG和Highcharts

chart.renderer.rect

。有一个可以附加的属性列表；但是在这里使用梯度的方法是什么？酷。非常感谢！然而，我没有成功地找出这四个参数代表什么。你能告诉我一份描述这些的文件吗？我添加了第二个蓝色矩形（），但我对必须定义的设置感到困惑。@luftikus143，检查一下这个。这可能有助于你理解暗示。它帮助了我，我找到了一种方法，尽管我不能说我理解这四个值是如何起作用的。酷。非常感谢！然而，我没有成功地找出这四个参数代表什么。你能告诉我一份描述这些的文件吗？我添加了第二个蓝色矩形（），但我对必须定义的设置感到困惑。@luftikus143，检查一下这个。这可能有助于你理解暗示。它帮助了我，我找到了一种方法，尽管我不能说我理解这四个值是如何起作用的。

 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();