HighChart表示線(plotLines)

マーキングライン配列は、マーキングによって軸上の特殊な値を指定し、図面領域にカスタムラインを描画します.表示線は常にその属する軸に垂直です.x軸またはy軸に単独で定義してもよいし、x軸とy軸に同時に定義してもよい.表示線がx軸とy軸で同時に定義されている場合、y軸に定義されている表示線が前に表示されます.具体的な例は次のとおりです.
1、x軸の値が3のところに赤い幅が2 pxの線を引く

xAxis: { 
    // ...     
    plotLines:[{
        color:'red',            //    ，     
        dashStyle:'longdashdot',//      ，   solid（  ），        
        value:3,                //            ，    x     3         
        width:2                 //      ，2px
    }]
 }

2、y軸にx軸と同じ赤い2 pxの線を引く

yAxis: {
    // ...     
    plotLines:[{
        color:'red',           //    ，     
        dashStyle:'solid',     //   ，       
        value:3,               //            ，    x     3         
        width:2                //      ，2px
    }]
}

上記で定義した2つの表示線の効果を下図に示します.
一、表示線の一般的な属性
標示線は、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、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      

上記の2つの方法により、addPlotLine()とremovePlotLine()は、表示線の追加と削除を動的に実現することができ、削除が必要な表示線は、追加または初期化の際にid属性に一意の値を付与する必要があり、idに保存しないとremovePlotLine()が失効することに注意しなければならない.
オンラインで試してみる
3、計器図とレーダー図における表示線
メータマップ(gauge)とレーダーマップ(polar)では、x軸に定義された表示線に直線が表示され、y軸に定義された表示線に同心円が表示されます.