新highcharts渲染器中的錯誤？

以下的jsfiddle顯示在那裏我將在圖表上的文本，讓文本的寬度/高度，然後用寬度/高度制定出在哪裏再次將同一文本的例子，但這次在中間圖表，並與它周圍的邊界框：新highcharts渲染器中的錯誤？

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

上面使用highcharts 4.0.4。

some code

這裏是完全相同的代碼，但使用highcharts 4.1.1：，

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

邊框已被置於圍繞第一放置文本儘管使用的X，Y，寬度，高度信息從第二個放置的文本創建邊界框。

這是在新版本中的錯誤？

有沒有更好的方式來鍛鍊身體的地方文本，具有邊框，砰在圖表的中間？到現在爲止，我一直在放置（不可見的）虛擬文本，使用其寬度/高度來計算放置真實文本的位置，然後添加邊界框。這就是爲什麼我在新版本中遇到這個問題。

來源

2015-02-24 drmrbrewer

嗯，我仍然不知道爲什麼在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 ...

編輯...黨！新的解決方案打破了，當我加入<br>拆分成多個行文字：

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

不知道如何解決這個問題？

來源

2015-02-24 19:04:03 drmrbrewer

我只是嘗試使用'renderer.label'，而不是'renderer.text'：http://jsfiddle.net/mfr0rd4b/10/我有點困惑 - 爲什麼你需要使用更新矩形位置它是包圍盒？無論如何，你究竟想要達到什麼目標？關於'label' - >它可以包括背景/盒/邊框/陰影等：http://jsfiddle.net/mfr0rd4b/12/ – 2015-02-25 13:13:32

我愛highcharts ......無論什麼問題，總有一個解決方案！看起來標籤是要走的路，帶有集成的邊界框選項，並且可以毫無問題地使用
。根據邊界框更新位置的原因是，只需放置一個基於plotWidth/2和plotHeight/2的標籤即可將* corner *放置在中間。爲了讓標籤真正居中，你需要知道它的寬度和高度，並根據其中的一半來移動標籤。順便說一句，爲什麼它'textBBox.height * 0.25'而不是'textBBox.height * 0.5'爲此目的？ – drmrbrewer 2015-02-25 13:30:20

而且，更好地控制填充的任何方式......我發現填充不在標籤周圍，例如，請參閱http://jsfiddle.net/drmrbrewer/mfr0rd4b/13/。另外，任何方式來添加一個角落半徑的標籤邊界框？ – drmrbrewer 2015-02-25 13:45:04

新highcharts渲染器中的錯誤？

回答

相關問題