HighCharts中添加一條會隨着鼠標移動的豎線(crosshairs)

HighCharts中添加一條會隨着鼠標移動的豎線

    tooltip: {
            shared: false,
            crosshairs: true,
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            }
        },

效果圖如下:

在HighCharts API文檔中介紹如下:

crosshairs: Mixed
十字準線。十字準線可以被定義爲一個Boolean 值，一組Boolean 值 或 json對象。
一. 爲 Boolean時：
    1. 如果十字準線選項爲true，一條單一的與X軸有關的十字準線將被顯示出來。(如上圖)
    2. 爲一組Boolean時：
       在一組Boolean值中，第一個值表示是否與X軸有準線連接，第二個值表示是否與Y軸有準線連接。使用[true, true]可以展現完整的十字準線。
二. 爲json 對象時：
對象中包含更詳細的屬性設置，屬性包括 width, color, dashStyle和zIndex，分別代表線條寬度、顏色、演示 及 顯示層次。
默認值：Null

爲一組Boolean時:
代碼如下:

 tooltip: {
            crosshairs: [true, true]
        }

爲json對象時:
代碼如下:

        tooltip: {
            crosshairs: [{
                width: 3,
                color: 'green'
            }, {
                width: 3,
                color: 'red'
            }]
        }

如圖:

dashStyle : 標示線的線條樣式，默認是solid，即直線型，更多下面詳細說明.
zIndex 層疊，標示線在圖表中顯示的層疊級別，值越大，顯示越向前，默認標示線顯示在數據線之後.

線條樣式如下: