ハイチャート：レンダラを移動する（カスタム描画）

Question

ハイチャートを使用して〜100,000ポイントをプロットしています。

いくつかのカスタムデータに基づいて、下にさまざまな矩形を描画したいと思っています。基本的には、矩形の位置と長さを開始するだけです。ズームすると、長方形はそのまま残り、「調整」されません。

私は単純なフィドルを持っていますが、ここで描かれた長方形は小さなサブセットです。

http://jsfiddle.net/n2549ewg/1/

chart.renderer.rect(x1, y2, x2 - x1, y1 - y2) 
       .attr({ 
        fill: 'blue' 
       }).add(); 

すべてのカスタムレンダラを自動的にスケーリングし得ることができること方法はありますか？ 実例が素晴らしいでしょう。

Answer 1

矩形の位置を再計算する必要があります。これは再描画イベントで行うことができますが、長方形の作成中に使用した乱数を生成する必要があります。

以下のコードをループ内に追加すると、各矩形の座標が保存されます。

rectangle = { 
    start: start, 
    len: len, 
    ystart: ystart, 
    yend: yend, 
    element: chart.renderer.rect(x1, y2, x2 - x1, y1 - y2) 
    .attr({ 
     fill: 'blue' 
    }).add() 
}; 

chart.rectangles.push(rectangle); 

再描画時には、ズーム後にx軸とy軸がスケールを変更した新しいスケールに基づいて位置を再計算します。

events: { 
    redraw: function() { 
     var xAxis = this.xAxis[0], 
      yAxis = this.yAxis[0]; 

     this.rectangles.forEach(function (rect) { 
     var x1 = xAxis.toPixels(rect.start), 
      x2 = xAxis.toPixels(rect.len), 
      y1 = yAxis.toPixels(rect.ystart), 
      y2 = yAxis.toPixels(rect.yend); 

     rect.element.attr({ 
      x: x1, 
      y: y2, 
      width: x2 - x1, 
      height: y1 - y2 
     }); 
     }); 
    } 

例：あなたが例で見ることができるようにズームするときhttp://jsfiddle.net/n2549ewg/4/

、rectsも大きな得ます。そのような動作を避けたい場合は、幅と高さを変更しないでください。矩形は位置が調整されますが、サイズは変わりません。

例：http://jsfiddle.net/n2549ewg/5/