正常写法的代码(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);
来创建,其中 parentNode 是 HTML 元素(DOM)
绘图工具的方式支持链式调用,即你可以在创建绘图工具对象后在一个语句中依次调用 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 元素的类名。
返回值
在线实例: