如何對齊中心highcharts

自定義標籤見a jsfiddle example 如何對齊中心highcharts

labels: { 
     items : [{ 
      html : 'Center Me!', 
      style : { 
       left : '0px', 
       top : '-15px', 
       fontSize : '20px' 
      } 
     }] 
    }

我想對齊的自定義標籤在/標籤/項目JSON元掛權下的標題和副標題。

玩螢火蟲我可以改變標籤的SVG文本元素，並添加文本對齊='中'，並更改x =''屬性具有與標題的x屬性相同的值。這使得它在標題下完美對齊，並在調整大小時保持在那裏，但我無法弄清楚如何使highcharts庫生成此源。

也許有更好的方法在副標題下添加另一個標籤？

來源

2011-10-09 Chrissy

你在說什麼「自定義標籤」？軸標籤，點標籤，您自己的標籤，......它在哪裏？你能更清楚一點嗎？ –

第一次使用jsfiddle，它看起來像我沒有'妥善保存我的更改。再看看上面的鏈接，你應該看看我是如何添加標籤的。我確實快速跳入js，看起來他們需要一個絕對的左上角位置。但也許我錯過了什麼？無論如何，現在，我剛剛重新設計了我的標題和副標題，所以我不需要其他標籤。這是一個片段。 '標籤：{{html：'Center Me！'， style：{ left：'0px'' ... – Chrissy

你說得對，標籤要求以像素爲單位設置頂部和左側屬性。重新設計標題+副標題是一個好主意。另一種解決方案可能是使用'renderer.text（）'，還需要設置頂部和左側，但這可以在繪製圖表之後完成，以便您可以計算位置之前（使用'chart.plotTop'，'圖表.plotLeft'等） –

快速修復：此添加到您的風格

左：我用percetange不是 '160像素'

來源

2012-09-24 09:36:34

-1

。

  left:300%

入住這jfiddle http://jsfiddle.net/F2erm/146/

來源

2015-07-11 06:52:16

減小窗口大小，看看你的標籤在哪裏... –

如果你願意，你也可以在圖表已經產生了這樣做的效果（見http://jsfiddle.net/brightmatrix/5517s8zb/1/例子）後面加一個HTML元素。

在這種情況下，要獲得適當的居中效果，您需要明確定義容器div的寬度。

<div id="container" style="height: 400px; width: 100%"></div>

下面是HTML元素：

/* add an HTML element to the chart starting at 0px from the left corner and 
    10% of the container's height from the top */ 
chart.renderer.html('<div align="center" style="font-size: 20px; width: ' + 
$('#container').width() + 'px">Center Me!</div>',0,$('#container').height()*.1).add();

我做容器的高度的10％，以幫助使位置更加靈活。您也可以選擇添加或減去特定的像素尺寸，直到將其放置在您喜歡的位置。

我希望這是有幫助的！

來源

2016-01-20 12:46:00

如何對齊中心highcharts

回答

相關問題