ハイチャートの矩形にグラデーションを適用する方法

Question

ハイチャートグラフに矩形を追加して、方向を強調表示したい（より暑い、より寒い）。そのためには、白から赤、そして白から青へのグラデーションを使って作業したいと思います。

しかし、私はSVG gradient styleをHighchartsで使用されているコードにどのように適用できないのでしょうか。鉱山は、私がここにグラデーションスタイルを追加するにはどうすればよい

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

（here is a fiddle）このように見えますか？

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

Answer 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/