highchartsは、参照は、新たに私は、チャートのプロパティに基づいて、いくつかの線を描画する<code>events.load</code>機能付きのチャートを持っているチャート

Question

を再描画機能を（）を再描画します。

ロード機能は、私はそれをしたいのですがどのように正確に動作しますが、私は消去し、（このような一連の隠蔽など）の行にチャートが再描画されますたびに再描画したいと思います。

chart.events.redraw機能でこれと同じ機能（消去あり）を追加しましたが、redraw()機能に与えられたオブジェクトは新しいプロパティではなく、以前のチャートプロパティです。フィドルで例えば

、あなたはカナダ、x軸の変化を隠しますが、ラインが描画されません場合。しかし、再びカナダをクリックして非表示にすると、グラフは再描画されますが、以前のプロパティが表示されます。

再描画する方法はありますか？新しく描かれたグラフのプロパティはありますか？ ありがとう！

（fiddle）を参照してください。代わりに、実際の描画されたグリッド線を使用してそれらの位置を解析する、要するに

events : { 
    load: function(){ 
      var ren = this.renderer; 
       // Get data from the highcharts object 
       var plot = this.plotBox; 
       var zeroGridLine = this.yAxis[0].ticks[0].gridLine.d; 
       var zeroGridLineArray = zeroGridLine.split(' '); 
       var topPos = plot.y;            // top of the chart 
       var zeroPos = parseFloat(zeroGridLineArray.slice(-1)[0]);   // position of the zero line 
       var bottomPos = topPos + plot.height;        // bottom of the chart 
       var vertLinePos = parseFloat(zeroGridLineArray.slice(-2)[0]) + 8; // vertical line position 
       var horizWidth = 5;             // width of the horizontal lines 
       var strokeWidth = 1;            // thickness of the line 
       var stroke = 'black';            // color of the line 

       // exports vertical line 
       ren.path(['M', vertLinePos, topPos, 'L', vertLinePos, zeroPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_0' 
        }) 
        .add(); 
       // imports vertical line 
       ren.path(['M', vertLinePos, zeroPos, 'L', vertLinePos, bottomPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_1' 
        }) 
        .add(); 
       // Horizontal line to separate import/export 
       ren.path(['M', vertLinePos - horizWidth, zeroPos, 'L', vertLinePos + horizWidth, zeroPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_2' 
        }) 
        .add(); 
       // top horizontal line 
       ren.path(['M', vertLinePos - horizWidth, topPos, 'L', vertLinePos + horizWidth, topPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_3' 
        }) 
        .add(); 
       // bottom horizontal line 
       ren.path(['M', vertLinePos - horizWidth, bottomPos, 'L', vertLinePos + horizWidth, bottomPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_4' 
        }) 
        .add(); 
       // label imports and exports 
       ren.text('Exports',vertLinePos + 5,((zeroPos - topPos)/2) + topPos + 3) 
       .attr({id: 'impExpLines_5'}) 
       .add(); 
       // label imports and exports 
       ren.text('Imports',vertLinePos + 5,((bottomPos - zeroPos)/2) + zeroPos + 3) 
       .attr({id: 'impExpLines_6'}) 
       .add(); 
      }, 
     redraw : function(){ 
      // clear previosuly drawn lines 
      $("[id^=impExpLines_]").remove(); 
       var ren = this.renderer; 
       // Get data from the highcharts object 
       var plot = this.plotBox; 
       var zeroGridLine = this.yAxis[0].ticks[0].gridLine.d; 
       var zeroGridLineArray = zeroGridLine.split(' '); 
       var topPos = plot.y;            // top of the chart 
       var zeroPos = parseFloat(zeroGridLineArray.slice(-1)[0]);   // position of the zero line 
       var bottomPos = topPos + plot.height;        // bottom of the chart 
       var vertLinePos = parseFloat(zeroGridLineArray.slice(-2)[0]) + 8; // vertical line position 
       var horizWidth = 5;             // width of the horizontal lines 
       var strokeWidth = 1;            // thickness of the line 
       var stroke = 'black';            // color of the line 

       // exports vertical line 
       ren.path(['M', vertLinePos, topPos, 'L', vertLinePos, zeroPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_0' 
        }) 
        .add(); 
       // imports vertical line 
       ren.path(['M', vertLinePos, zeroPos, 'L', vertLinePos, bottomPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_1' 
        }) 
        .add(); 
       // Horizontal line to separate import/export 
       ren.path(['M', vertLinePos - horizWidth, zeroPos, 'L', vertLinePos + horizWidth, zeroPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_2' 
        }) 
        .add(); 
       // top horizontal line 
       ren.path(['M', vertLinePos - horizWidth, topPos, 'L', vertLinePos + horizWidth, topPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_3' 
        }) 
        .add(); 
       // bottom horizontal line 
       ren.path(['M', vertLinePos - horizWidth, bottomPos, 'L', vertLinePos + horizWidth, bottomPos]) 
        .attr({ 
         stroke: stroke, 
         'stroke-width': strokeWidth, 
         id: 'impExpLines_4' 
        }) 
        .add(); 
       // label imports and exports 
       ren.text('Exports',vertLinePos + 5,((zeroPos - topPos)/2) + topPos + 3) 
       .attr({id: 'impExpLines_5'}) 
       .add(); 
       // label imports and exports 
       ren.text('Imports',vertLinePos + 5,((bottomPos - zeroPos)/2) + zeroPos + 3) 
       .attr({id: 'impExpLines_6'}) 
       .add(); 
      } 
     } 

Answer 1

、画素位置に軸の値を変換するユーティリティメソッドであるtoPixels関数を使用します。あなたのコードでは、行があります。

var zeroPos = parseFloat(zeroGridLineArray.slice(-1)[0]); // position of the zero line 

をして、その行を置き換えます

var zeroPos = this.yAxis[0].toPixels(0); // position of the zero line 

this JSFiddleデモを参照してください。

私は特にあなたのコードの残りの部分を読んでいなかったが、あなたはまた、より簡単に解析するのではなく、このメソッドを使用して軸の上部と下部を確立することができるかもしれません。