十七、標籤及字符串格式化

Highcharts 圖表中的任意文字都可以通過 format (格式化字符串)或 formatter (格式化回調函數) 屬性來進行修改,format 總是有對應的一個或多個 formatter ,其中 format 字符串簡單方便,formatter 回調函數則更加靈活,他們兩都是兼容 JSON 格式的。

一、HTML標籤

默認情況下,Highcharts 中的文字及標籤使用 SVG 渲染的,所有在默認情況下,Highcharts 只支持少量的和文字相關 HTML 標籤:<b>、<strong>、<i>、<em>、<br/>、<span>。這些標籤(除 br )支持 style 屬性來設置樣式,不過支持的樣式也僅限和文字相關的樣式。
圖表中大多數文字還支持 HTML 渲染默認,即設置 userHTML = true 來開啓。HTML 模式支持全部的 HTML 標籤,你可以輕鬆的添加圖片、表格到圖表的標籤中,例如在提示框中添加表格、在座標軸標籤添加圖片等。HTML 默認有如下限制:
* HTML 渲染的標籤內容是獨立在 <svg> 標籤外的,這就導致了標籤是在 SVG 元素的頂層(z-index,即層疊)
* 在導出中並不會生效(即生成導出圖片中的標籤不會以 HTML 渲染)。我們提供了實驗性屬性 exporting.allowHTML 可以解決這個問題
HTML 渲染模式在低版本瀏覽器進行雙向文字排版中會出現一些問題,詳細請查看我們的文檔中關於 國際化 相關的內容。

二、格式化字符串

格式化字符串是包含了變量的標籤模板。格式化字符串最早是在 Highcharts 2.3 中推出的,並在 Highcharts 3.0 中增強了功能,增加了數值格式化及時間格式化。具體的使用實例是在 xAxis.labels.format、tooltip.pointFormat 及 legend.labelFormat

1. 變量

變量是格式化中用大括號包括的字符,例如 "The point value at {point.x} is {point.y}"

2. 數值格式化

數值格式化字符串是採用了 C 語言浮點型格式化的子集,格式化字符是在大括號內,變量之後,用冒號(:)分隔的內容。默認情況下點號(.)表示小數點,空格( )代表千分符,當然這兩個符號可以在 語言文字 選項集裏中來設定。下面是一些實例:
*  保留兩位小數:{point.y:.2f}
*  包含默認千分位符號及不保留小數位:{pont.y:,.0f}
* 指定千分符,保留一位小數:{point.y:,.1f}

3、時間格式化

同數值格式化,時間格式化也是以冒號爲分隔的。時間格式化字符中的符號同 時間格式化函數,下面是實例:
    * 完整的時間格式化:{value:%Y-%m-%d}

三、格式化回調函數

對於需要靈活控制、自定義格式化邏輯的需求,我們可以用格式化回調函數來處理,格式化回調函數最終返回 HTML (部分HTML標籤)內容。具體的使用可以見 xAxis.labels.formatter、tooltip.formatter 及 legend.labelFormatter 等,另外在格式化函數裏你進行會需要用到 時間格式化函數 及 數值格式化函數
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章