javascript - highcharts redraw() 具有引用新重绘图表的功能

Question

我有一个带有 events.load 函数的图表，该函数根据图表属性绘制一些线条。

加载功能完全按照我的意愿工作，但我想在每次重新绘制图表时删除并重新绘制线条(例如隐藏系列)。

我在 chart.events.redraw 函数上添加了相同的函数(带删除)，认为这可以解决问题，但是给 redraw() 的对象function 是以前的图表属性，不是新属性。

例如在 fiddle 中，如果您隐藏加拿大，则 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演示。

我没有专门通读您的其余代码，但您也可以使用此方法而不是解析来更轻松地建立轴的顶部和底部。