highcharts重繪（）與函數，引用新繪製的圖

Question

我有一個圖表events.load功能，根據圖表屬性繪製一些行。

加載函數的工作原理與我喜歡的一樣，但是我想在每次圖表重繪時（例如隱藏一系列圖）擦除並重新繪製線條。

我在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示範。

我沒有專門閱讀代碼的其餘部分，但也可以使用此方法而不是解析來更容易地建立軸的頂部和底部。