0

我想在 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）。但是，当调整图表大小时，该框相对于图表的左上角保持相同的位置，导致与标签文本不对齐（标签的位置因图表调整大小而变化）。我尝试为此使用图表重绘事件，但即使我可以看到该事件被触发，并且再次执行该函数，也没有绘制其他框（我试图在每次重绘时出现更多框，计划解决在下一次迭代中删除过时的盒子）。我该如何解决这个问题？

4

1 回答 1

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

于 2013-03-21T11:08:53.253 回答