Question

我想在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();

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

Answer 1

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

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

Answer 2

您需要定义并添加到DOM中，如下所示。

"Enrollment failed -Please contact administrator "

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

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

2 个答案: