十三、基礎教程-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: '' 
        }
    }]
}

擴展內容

通過學習上面的內容我們知道，HTMl標籤只能添加簡單的文字標籤，並且只能是在圖標初始化的時候才能添加，那麼對於添加文字標籤，highcharts 有沒有更方便的編程接口呢？

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 添加文字標籤

1、Renderer.text()

Renderer.text(String str, Number x, Number y) 

2、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 的類