我想在highstock图表中绘制plotLine标签背后的背景。 使用Highstock API中的示例,我想出了这个代码(crt是图表对象):
var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
var box = textbox.getBBox();
crt.renderer.rect(box.x - 3, box.y + 1, box.width + 6, box.height, 3).attr({
fill: '#0c0',
id: 'labelBack',
opacity: .7,
'stroke-width': 0,
zIndex: 4
}).add();
这会在标签后面绘制一个半透明的框(标签有zIndex 5)。但是,在调整图表大小时,框相对于图表的左上角保持相同的位置,导致与标签文本不对齐(由于图表大小调整,标签的位置会发生变化)。 我尝试使用图表重绘事件,但即使我可以看到事件被触发,并且该函数再次执行,也没有绘制其他框(我试图在每次重绘时显示更多框,计划到解决在下一次迭代中删除过时的方框)。 我该如何解决这个问题?
答案 0 :(得分:2)
感觉更像是一个黑客而不是一个真正的解决方案,但我现在提出了解决我的问题的解决方法,我有以下功能:
var labelBackground = null;
function labelDrawBack(crt) {
if ( isIntraDay ) {
var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
if ( !!labelBackground ) {
labelBackground.attr({ y: textbox.y - 10 });
} else {
var box = textbox.getBBox();
labelBackground = crt.renderer.rect( box.x - 3, box.y + 1, box.width + 6, box.height, 3 ).attr( {
fill: '#fff',
id: 'labelBack',
opacity: .65,
'stroke-width': 0,
zIndex: 4
}).add();
}
}
}
我确保在初始化图表后立即执行此函数,另外我将函数附加到StockChart调用返回的图表对象:
var chartObj = new Highcharts.StockChart( chartConfig, function ( crt ) {
labelDrawBack( crt );
} );
chartObj.labelDraw = labelDrawBack;
在图表选项中,我已将其添加到chart.redraw事件中:
events: {
redraw: function() {
this.labelDraw(this);
}
}
这可以按预期工作,使用标签移动透明背景(在调整图表大小时垂直移动)。 我在图表重绘事件中重定向调用的原因是labelDrawBack函数是在另一个函数中定义的,而不是定义我的图表选项的函数,因此labelDrawBack函数超出了范围。