ハイチャートレンダラーでストローク幅をアニメーション化する

Question

ハイチャートのSVGレンダリングAPI（レンダラー）を使用してカスタムチャートを描画しています。私は、rectのストローク幅属性をアニメートしたいと思います。 Here is例はHighchartsのドキュメントで提供されていますが、正しく動作していないようです。すべての属性はストローク幅を除いて変更されています。
私はクロームデベロッパーツールでHTMLを開くと、私が見ることができるような何か：ストローク幅がラクダスタイル名を使用して設定されている

<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray" 
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect> 

、ダッシュスタイルのない名前を。

いくつかの回避策がありますか？

Answer 1

はい、回避策があります。これを実現するには、jQueryのattr（）関数を使用します。長方形をクリックすると、線幅属性が変更されます。

これはおそらくAPIのバグとして報告するのが良い点だと思いますか？あなたのコメントのI編集に基づいて調整JSFIDDLE

---

VERSION 2

に、ここでのアクションでそれを見るために

$(function() { 
    var renderer = new Highcharts.Renderer(
      $('#container')[0], 
      400, 
      300 
     ), 
     rect = renderer.rect(100, 100, 100, 100, 5) 
      .attr({ 
       'stroke-width': 2, 
       stroke: 'gray', 
       fill: 'silver', 
       zIndex: 3 
      }) 
      .on('click', function() { 
       rect.animate({ 
        x: 50, 
        y: 50, 
        width: 200, 
        height: 20 
       }) 
       $("rect").attr("stroke-width", "30"); // here you can change the stroke-width    
      }) 
      .add(); 
}); 

：

とにかくJSコードは次のようになります。コード。この場合、ストローク幅のアニメーションも設定します。これは簡単な解決策です。もう一つの解決策は、私が推奨していないオリジナルのHighchartsライブラリを調整することです。とにかく、それが役に立てば幸い：

$(function() { 
    var renderer = new Highcharts.Renderer(
      $('#container')[0], 
      400, 
      300 
     ), 
     rect = renderer.rect(100, 100, 100, 100, 5) 
      .attr({ 
       'stroke-width': 2, 
       stroke: 'gray', 
       fill: 'silver', 
       zIndex: 3 
      }) 
      .on('click', function() { 
       rect.animate({ 
        x: 50, 
        y: 50, 
        width: 200, 
        height: 20 
       }) 
       $("rect").animate(
        { "stroke-width": "10" }, 
        { 
         duration: 500, 
         step: function(now) { $(this).attr("stroke-width", now); } 
        });     
      }) 
      .add(); 
}); 

期間はあなたのために適しているものに調整することができます。 ここでの動作をご覧ください：JSFIDDLE