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

Question

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

但我不明白 SVG gradient style can be applied to the code used in Highcharts. Mine looks like this (here is a fiddle)

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

这里如何添加渐变样式？

Answer 1

您需要定义并添加到 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/

Answer 2

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

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

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

How to apply a gradient to a rectangle in Highcharts

css

svg

gradient

highcharts