js省略物件名,寫完一個屬性,直接寫另一個 . 屬性名,這種語法糖叫 鏈式呼叫
正常寫法的程式碼(chart.lbl重複多次):
chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60);
chart.lbl.attr({
padding: 10,
r: 5,
fill: Highcharts.getOptions().colors[1],
zIndex: 5
});
chart.lbl.css({
color: 'red'
});
chart.lbl.add();
簡便寫法的程式碼:
chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60) .attr({ padding: 10, r: 5, fill: Highcharts.getOptions().colors[1], zIndex: 5 }) .css({ color: 'white' }) .add();
https://www.cnblogs.com/tarol/p/5336666.html
鏈式呼叫介紹。
其實對於highcharts程式碼本身,一開始理解錯了,以為chart.lbl是highcharts已定義的變數,其實chart.lbl只是自己定義的變數,之前還有一段程式碼:
var chart = $('#container').highcharts(),
selectedPoints = chart.getSelectedPoints();
if (chart.lbl) {
chart.lbl.destroy();
}
可以看出在賦值前,如果chart.lbl存在,現將它清除,再賦值。
實際上chart.lbl是highcharts定義的Renderer物件的例項:
https://api.hcharts.cn/highcharts#Renderer
Renderer
繪圖工具可以直接操作 Highcharts 的渲染層並繪製基礎的圖形,例如直接在圖表中新增 圓形、矩形、路徑或文字,甚至是獨立於圖表的圖形。
在主流的瀏覽器中繪圖工具物件是 SVG 的封裝,對應的在低版本 IE (IE8 以下)中是 VML 封裝
已經例項化的圖表物件可以通過 chart.renderer
來獲取繪圖工具物件,如果需要獨立圖表的繪圖工具物件,請通過 var renderer = new Highcharts.Renderer(parentNode, width, height);
繪圖工具的方式支援鏈式呼叫,即你可以在建立繪圖工具物件後在一個語句中依次呼叫 attr
、 css
、 add
等。
https://api.hcharts.cn/highcharts#Renderer.label
label
(String str, Number x, Number y, String shape, Number anchorX, Number anchorY, Boolean useHTML, Boolean baseline, String className)
翻譯人:群大大
繪製標籤,標籤比普通的文字(text
)支援更高階的屬性,例如 邊框、背景等。標籤包含一個分組 g
元素,其裡面包含一個文字標籤 text
和一個路徑 path
或矩形 rect
,通過 attr 函式來設定 stroke
, stroke-width
和 fill
屬性可以讓標籤更像 HTML 的 div,另外更新標籤裡的文字可以通過 Element.attr({ text: 'New text' })
來進行操作。
引數
- str: String
需要繪製的文字或 HTML。 - x: Number
定位點的 x 值(左上角)。 - y: Number
定位點的 y 值(左上角),定位點是頂部或基線(baseline
),這取決於基線引數。 - shape: String
標籤的背景或邊框的形狀,預設是rect
。 - anchorX: Number
如果標籤的形狀包含突出角,anchorX 則表示突出角的定位點的 x 值。(突出角請參考 Highcharts 的 tooltip 的突出角形狀)。 - anchorY: Number
如果標籤的形狀包含突出角,anchorY 則表示突出角的定位點的 y 值。(突出角請參考 Highcharts 的 tooltip 的突出角形狀)。 - useHTML: Boolean
是否使用 HTML 模式來渲染標籤。 - baseline: Boolean
是否設定標籤基於 baseline 來進行垂直對齊文字。該值為 true 時垂直物件方式和text
元素一樣,為 false 是則和 div 的物件方式一樣(左上角對齊)。 - className: String
code>g 元素的類名。
返回值
線上例項: