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); 来创建，其中 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 元素的类名。

返回值

• Element

在线实例：

绘制自定义标签