Question

以下jsfiddle显示了一个示例，其中我在图表上放置文本，获取该文本的宽度/高度，然后使用宽度/高度计算出再次放置相同文本的位置，但这次在图表的中间，并在其周围有一个边界框：

http://jsfiddle.net/drmrbrewer/mfr0rd4b/3/

以上是使用highcharts 4.0.4。

some code

以下是完全相同的代码，但使用的是高级图4.1.1：

http://jsfiddle.net/drmrbrewer/mfr0rd4b/4/

尽管使用第二个放置文本中的x，y，width，height信息创建了边界框，但边界框已放置在第一个放置的文本周围。

这是新版本中的错误吗？

有没有更好的方法来制作带有边框的地方文字，在图表中间爆炸？直到现在，我一直在放置（隐藏）虚拟文本，使用它的宽度/高度来确定放置真实文本的位置，然后添加边界框。这就是我在新版本中遇到此问题的原因。

Answer 1

嗯，我仍然不确定为什么OP中的例子从4.0.4突破到4.1.1，但我的问题的部分答案，至少提供了一个在4.1.1中工作的解决方案，是由以下jsfiddle给出：

http://jsfiddle.net/drmrbrewer/mfr0rd4b/7/

    text = chart.renderer.text("My Text").add();
    textBBox = text.getBBox();
    x = chart.plotLeft + (chart.plotWidth * 0.5) - (textBBox.width * 0.5);
    y = chart.plotTop  + (chart.plotHeight * 0.5) - (textBBox.height * 0.25);
    text.attr({x: x, y: y, zIndex: 10});

    rect = chart.renderer.rect(x, y, textBBox.width, textBBox.height, 2)
        .attr({
            fill: '#FFFFEF',
            stroke: 'gray',
            'stroke-width': 1,
            zIndex: 9
        })
        .add();
    rectBBox = rect.getBBox();
    rect.attr({y: y - rectBBox.height*0.5 - textBBox.height*0.25});

第二个谜是为什么它是textBBox.height * 0.25而不是textBBox.height * 0.5 ......

编辑... dang！当我添加<br>以跨文本分割文本时，新解决方案会中断：

http://jsfiddle.net/drmrbrewer/mfr0rd4b/8/

知道如何解决这个问题吗？

新的highcharts渲染器中的错误？

1 个答案: