# HTML標簽（labels） HTMl標簽（Lables）指的是可以放置在圖表中任意位置的文字標簽，由于最終的文字標簽是以 SVG 渲染的，所以標簽的內容只支持少量的 HTML 標簽，包括：`<b>`、`<strong>`、`<i>`、`<em>`、`<br/>`、`<span>`，其中 可以通過 style 屬性來設定樣式，但是有效的樣式僅限和文字相關的屬性。HTML 標簽的基本構造是： ``` labels: { style: { // 標簽全局樣式 color: "#ff0000", fontSize: '12px', fontWeight: 'normal', fontFamily: '' }, items: [{ // items 數組，可以設置多個標簽 html: 'html 標簽內容', style: { // 標簽樣式，會繼承和重寫上層全局樣式 left: '50px', top: '100px', color: 'red', fontSize: '12px', fontWeight: 'normal', fontFamily: '' } }] }, ```  [在線試一試](http://code.hcharts.cn/highcharts/hhhhLQ) ### 擴展內容 通過學習上面的內容我們知道，HTMl標簽只能添加簡單的文字標簽，并且只能是在圖標初始化的時候才能添加，那么對于添加文字標簽，highcharts 有沒有更方便的編程接口呢？ 答案是有的，對應的 API 是 `[Renderer](http://www.hcharts.cn/api/index.php#Renderer)`。 Renderer 是一個提供了原始繪圖接口的對象，可以直接在圖表上繪制基礎的圖形，包括圓形、矩形、線條、文字等，在主流瀏覽器中，對應的是 SVG 封裝，IE8 以下則是 VML 封裝。 Renderer 可以通過 chart.renderer （chart 為已經存在的圖表對象）或 Highcharts.Renderer() 方式調用，對應的初始化方式有所不同： `chart.renderer` `Highcharts.Renderer(parentNode, width, height);` 其中 parentNode 表示圖形希望被添加到的 html元素（dom）。 Renderer 支持鏈式編程，即可以在同一個表達式中多次調用相關的函數，例如： ``` chart.render.rect( // ... 省略代碼 ).attr( // ... 省略代碼 ).css( // ... 省略代碼 ); ``` 更多關于 Renderer 的信息請參看 API 文檔：[Renderer](http://www.hcharts.cn/api/index.php#Renderer)。 #### 通過 Renderer 給圖表添加文字標簽 ##### 1、Renderer.text() 構造方法： `Renderer.text(String str, Number x, Number y)` 參數列表： ``` String str: 需要添加的文字 Number x: 水平偏移 Number y: 豎直偏移 ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhoD) ##### 2、Renderer.label() Renderer.label() 支持更多高級屬性，例如邊框，背景等。 構造方法： `Renderer.label (String str, Number x, Number y, String shape, Number anchorX, Number anchorY, Boolean useHTML, Boolean baseline, String className)` 參數列表： ``` String str: 標簽內容 Number x: 水平偏移 Number y: 豎直偏移 String shape: 形狀 Number anchorX: 如果形狀中包含指示，例如 chevron 和 callout。anchorX 指定指示形狀的 x 位置 Number anchorY: 如果形狀中包含指示，例如 chevron 和 callout。anchorY 指定指示形狀的 y 位置 Boolean useHTML: 是否開啟 HTML 模式來渲染標簽 Boolean baseline:是否讓標簽以文字的 baseline 來豎直對齊 String className:標簽的父級元素 g 的類 ```  [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhov) * * * （正文完，最后更新時間：2015-06-15 11:50:33）