23

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がグラフビューポートから出て表示されなくなります。

4

4 に答える 4

32

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

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

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

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

于 2013-08-30T23:03:07.763 に答える
19

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

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

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

于 2012-10-26T13:12:19.950 に答える
2

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

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

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

于 2018-02-09T11:38:04.040 に答える
0

max属性を次の最大値に設定するだけです。

yAxis: {

            max:650 //HERE
            plotLines...

        },
于 2020-02-05T01:47:36.050 に答える