Highcharts 如何在highstock图表中绘制绘图线标签后面的背景

我想在highstock图表中的绘图线标签后面绘制背景。 使用Highstock API中的一个示例，我得出了以下代码（crt是图表对象）：

这将按预期在标签后面绘制一个半透明框（标签具有zIndex 5）。但是，调整图表大小时，框相对于图表左上角保持相同的位置，从而导致与标签文本不对齐（由于调整图表大小，标签位置会发生变化）。 为此，我尝试使用图表重画事件，但即使我可以看到事件被触发，并且函数再次执行，也没有绘制其他框（我试图在每次重画时显示更多框，计划在下一次迭代中解决删除过时框的问题）。

---

我该如何解决这个问题？

这感觉更像是一种黑客行为，而不是真正的解决方案，但我已经想出了一个解决问题的方法。目前，我有以下功能：

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函数超出了该函数的范围。

在重画中，甚至可以使用它而不是crt。您能在JSFIDLE中设置示例吗？它应该是您描述的方式。实际上，您可以在重画事件中使用“this”。但是，我的设置更复杂，因为我有单独的函数创建图形选项和图形本身，请参阅下面我自己的答案以了解更多详细信息。我对解决方案做了另一个更改：我将labelDrawBack函数拆分为两个单独的函数，一个用于创建标签背景，另一个用于在运行时移动标签背景。

events: {
    redraw: function() {
        this.labelDraw(this);
    }
}