# 標示線（plotLines） 標示線是用來標記坐標軸上特殊值的一條直線，在繪圖區內繪制一條自定義的線。標示線總是垂直于它屬于的軸。它可單獨定義在x軸或y軸，也可以同時定義在x軸和y軸。如果標示線同時定義在x軸和y軸，定義在y軸的標示線會顯示在前面。具體實例如下： 1、在x軸上值為3的地方畫一條紅色的寬度為2px的線 ``` xAxis: { // ... 省略代碼 plotLines:[{ color:'red', //線的顏色，定義為紅色 dashStyle:'longdashdot',//標示線的樣式，默認是solid（實線），這里定義為長虛線 value:3, //定義在哪個值上顯示標示線，這里是在x軸上刻度為3的值處垂直化一條線 width:2 //標示線的寬度，2px }] } ``` 2、在y軸畫一條和x軸一樣的紅色的2px的線 ``` yAxis: { // ... 省略代碼 plotLines:[{ color:'red', //線的顏色，定義為紅色 dashStyle:'solid', //默認值，這里定義為實線 value:3, //定義在那個值上顯示標示線，這里是在x軸上刻度為3的值處垂直化一條線 width:2 //標示線的寬度，2px }] } ``` 上述定義的兩個標示線效果如下圖所示：  ### 一、標示線的常見屬性 標示線是x軸或y軸上的標記特殊刻度的線，它的屬性包括了顏色，事件，id，標簽，和zIndex層疊，常見屬性如下表所示： | 屬性名 | 描述 | 默認值 | | --- | --- | --- | | color | 標示線的顏色 | null | | dashStyle | 標示線的線條樣式，默認是solid，即直線型，更多下面詳細說明 | 'solid' | | events | 標示線的事件，詳細事件下文詳解 | null | | id | 定義標示線，在Axis.removePlotLine中定義去除那條標示線 | null | | value | 在坐標軸上顯示的位置 | null | | label | 標示線的文字標簽，用來描述標示線 | null? ? | | width | 標示線的寬度 | null???? | | zIndex | 層疊，標示線在圖表中顯示的層疊級別，值越大，顯示越向前，默認標示線顯示在數據線之后 | null | 常用屬性詳解 #### 1、Labels：標簽 標簽是對標示線的一個文字說明，文本值默認會顯示在標示線的上部。給標示線添加一個標簽的實例代碼如下： ``` plotLines:[{ // ..., 省略代碼 label:{ text:'我是標示線的標簽', //標簽的內容 align:'left', //標簽的水平位置，水平居左,默認是水平居中center x:10 //標簽相對于被定位的位置水平偏移的像素，重新定位，水平居左10px } }] ``` #### 2、dashStyle ：線條樣式 線條有直線型、虛線型等，所有的線條及樣式如下圖所示：  上圖所示的線條樣式同樣適用于Highcharts圖表中所有線條 #### 3、Events：事件 Highcharts為標示線提供了很多相關事件，詳細描述如下 ``` plotLines:[{ //..., 省略代碼 events:{ click:function(){ //當標示線被單擊時，觸發的事件 }, mouseover:function(){ //當標示線被鼠標懸停時，觸發的事件 }, mouseout:function(){ //當標示線被鼠標移出時，觸發的事件 }, mousemove:function(){ //當標示線被鼠標移動(時，觸發的事件 } } }] ``` 更多關于標題的屬性請參考API文檔：[**xAxis plotLines**](http://www.hcharts.cn/api/index.php#xAxis.plotLines) 、** [yAxis plotLines](http://www.hcharts.cn/api/index.php#yAxis.plotLines)** ### 二、動態增加或刪除標示線 Highcharts提供了相應的函數方便在圖表繪制完畢后對標示線動態的增加或刪除操作。 #### 1、增加標示線 可以通過`addPlotLine()`函數增加標示線，該函數的構造如下 `addPlotLine (Object options)`，其中options是一個`plotline`對象，實例代碼如下： ``` var chart = new Highcharts.Chart(); // Highcharts構造函數 chart.xAxis[0].addPlotLine({ //在x軸上增加 value:2, //在值為2的地方 width:2, //標示線的寬度為2px color: '#FCFFC5', //標示線的顏色 id: 'plot-line-1' //標示線的id，在刪除該標示線的時候需要該id標示 }); ``` #### 2、刪除標示線 Highcharts提供函數`removePlotLine()`供動態刪除標示線，removePlotLine ()函數結構如下： `removePlotLine (id)`? **參數說明**： **id**: 標示線的id，不存在該id時，該函數式無效的 **實例代碼**： ``` var chart = new Highcharts.Chart(); // Highcharts構造函數 chart.xAxis[0].removePlotLine('plot-line-1'); //把id為plot-line-1的標示線刪除 ``` 通過上述的兩個方法，addPlotLine()和removePlotLine(),可以動態的實現增加和刪除標示線，需要注意的是，需要進行刪除的標示線，在新增或初始化的時候需要給其id屬性賦唯一的值，如果不存在id，removePlotLine()會失效。 [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhWy) #### 3、?在儀表圖和雷達圖中的標示線 在儀表圖（gauge）和雷達圖（polar）中，定義在x軸上的標示線將會顯示一條直線，定義在y軸上的標示線將會顯示一個同心圓。 * * * （正文完，最后更新時間：2015-12-01 18:46:56）