我有一个带有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();
}
}
最佳答案
简而言之，不是使用实际绘制的网格线并解析其位置，而是使用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演示。
我没有专门阅读其余的代码，但是您也许还可以使用此方法而不是解析方法来更轻松地确定轴的顶部和底部。
关于javascript - highcharts redraw()具有引用新重绘图表的函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36898849/