可以通過 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 有沒有更方便的編程接口呢？

答案是有的，對應的 API 是 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)

參數列表：

String str: 需要添加的文字
Number x:   水平偏移
Number y:   豎直偏移 

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

Via：hcharts.cn

點擊下載最新版 Highcharts

如果你想提供任何產品反饋，。

購買最新版Highcharts<>，即可擁有最新正版授權!