标示线
标示线简单案例
xAxis: {
// ... 省略代码
plotLines: [{
color: 'red',
dashStyle: 'longdashdot',
value: 2,
width: 3
}]
}
常见属性
| 属性名 |
描述 |
默认值 |
| color |
标示线的颜色 |
null |
| dashStyle |
标示线的线条样式，默认是solid，即直线型，更多下面详细说明 |
'solid' |
| events |
标示线的事件，详细事件下文详解 |
null |
| id |
定义标示线，在Axis.removePlotLine中定义去除那条标示线 |
null |
| value |
在坐标轴上显示的位置 |
null |
| label |
标示线的文字标签，用来描述标示线 |
null |
| width |
标示线的宽度 |
null |
| zIndex |
层叠，标示线在图表中显示的层叠级别，值越大，显示越向前，默认标示线显示在数据线之后 |
null |
常见属性详解
-
Labels标签，标示线对应的文字说明
-
dashSyle有各种值，官网上关于这一章有详细示例
-
events,比如,click/mouseover/mouseout/mousemove
动态删除或者添加标示线
添加标示线
var chart = new Highcharts.Chart();
chart.xAxis[0].addPlotLine({
value:2,
width:2,
color: '#fcffc5',
id:'plot-line-1'
});
删除标示线
// 不存在id,该方法会失效
var chart = new Highcharts.Chart();
chart.xAxis[0].removePlotLine('plot-line-1');
