web-dev-qa-db-ja.com

HighChartsでplotLineを常に表示する方法は？

PlotLineを含むHighChartを作成しています。 plotLineの値は固定ですが、データはグラフによって異なる場合があります。

HighChartは、データの最大値に基づいてy軸を自動的にスケーリングしますが、計算ではplotLineの値を考慮しません。

したがって、データ範囲がplotLine値を含む場合、plotLineは表示されますが、含まれていない場合はビューポートからトリミングされます。

例：

$(function () {
    $(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Dummy Data by Region'
            },
            xAxis: {
                categories: ['Africa', 'America', 'Asia']
            },
            yAxis: {
                plotLines:[{
                    value:450,
                    color: '#ff0000',
                    width:2,
                    zIndex:4,
                    label:{text:'goal'}
                }]
            },
            series: [{
                name: 'Year 1800',
                data: [107, 31, 650]
            }]
        });
    });

});​

上記のコードのJSFiddle： http://jsfiddle.net/4R5HH/3/

デフォルトデータのゴールライン（赤）が表示されますが、データを[107、31、250]に変更すると、plotLineがグラフビューポートから外れるため、非表示になります。

highcharts
23
HRJ

チャートにポイントを追加する必要がありますが、マーカーを無効にします。散布図の種類とその値が目標値と等しい新しい系列を追加しました。

{
     name: 'Goal',
     type: 'scatter',
     marker: {
          enabled: false
     },
     data: [450]
}

更新されたjsFiddleを参照してください： http://jsfiddle.net/wergeld/4R5HH/4/

19
wergeld

データポイントを導入しないもう1つのオプション：

yAxis: {
    minRange:450,
    min:0,
    plotLines:[{
        value:450,
        color: '#ff0000',
        width:2,
        zIndex:4,
        label:{text:'goal'}
    }]
},

これにより、yAxisの最小値は0に設定され（この場合はfalseになる可能性は低い）、最小範囲は450に設定されます。

更新されたフィドル を参照してください。

30
jank

場合によっては、特にminとminRangeがわからない場合は、wergeldの解がjankの解よりも望ましい場合があります。しかし、wergeldのソリューションには小さな問題があります。プロットライン上にマウスを置くと、ポイントとそのポイントのツールチップが表示されます。これを回避するために、私は彼のソリューションを変更し、enableMouseTrackingを追加して問題を取り除きました。

{
     name: 'Goal',
     type: 'scatter',
     marker: {
          enabled: false
     },
     data: [450],
     enableMouseTracking: false
}

更新されたjsFiddleを参照してください： http://jsfiddle.net/4R5HH/570/

2
Debiprasad

max属性を最大値に設定するだけです：

yAxis: {

            max:650 //HERE
            plotLines...

        },
0
Angel Yadir Soto Delgado