2

ハイチャート グラフのツールチップをカスタマイズしたいと考えています。y 軸は「columnrange」タイプです。つまり、y 値の間隔があります。

    series: [{
        data: [
            [-0.547571175, 0.401498266],
            [-0.960011899, 0.444655955],
            [-0.660727717, 0.862639688],
            [-0.446911722, 0.660380453],
            [-0.863925256, 0.619544707],
               .......
        ]
    }]

ツールチップ フォーマッタは次のようになります。

    tooltip: {
        formatter: function() {
            var point = this.points[0];
            return '<b>'+ point.x +'</b><br />Interval:'+ point.low +' - '+ point.high;
        },
        shared: true
    }

しかしpoint.low、point.high定義されていません...これらの低/高値を取得するにはどうすればよいですか?

ここにサンプル グラフがあります: http://jsfiddle.net/dmN3N/21/

4

5 に答える 5

9

ツールチップで共有オプションを使用する場合は、this.points[0] などを使用する必要があります。共有オプションを無効にしている場合は、this.point を使用する必要があります。

共有された例を見てみましょう http://jsfiddle.net/dmN3N/24/

 tooltip: {
        shared:true,
        valueSuffix: '',
        formatter:function(){

            return 'LOW: '+this.points[0].point.low+' HIGH: '+this.points[0].point.high ;
        }
    },

共有されていない

http://jsfiddle.net/dmN3N/22/

tooltip: {
        valueSuffix: '',
        formatter:function(){

            return 'LOW: '+this.point.low+' HIGH: '+this.point.high;
        }
    },
于 2013-03-13T15:08:56.677 に答える
1

このコードは、ツールチップのフォーマッタで問題なく機能します。

tooltip: {
    formatter: function() {
        var point = this.points[0];
        return '<b>'+ point.x +'</b><br />Interval:'+ point.series.data[0].low +' - '+ point.series.data[0].high;
    },
    shared: true
}

サンプルについては、こちらを参照してください: http://jsfiddle.net/c2gVe/1/

于 2013-03-12T07:18:20.310 に答える
0

point[0]それぞれロー用とpoint[1]ハイ用だけじゃないの？

于 2013-03-12T05:04:24.627 に答える
0

あなたのフォーマッタ機能のために、これを試してください：

formatter: function() {
    var lowPoint = getLow(this.series.data, 'x');
    var highPoint = getHigh(this.series.data, 'x');
    return '<b>'+ this.x +'</b><br />Interval:'+ lowPoint +' - '+ highPoint;
}

および関数は単にポイントのリストを取得しgetLow()、getHigh()それぞれ低点/高点を返します。

これは実装方法の 1 つですが、好きなアルゴリズムを自由に使用できます。

最高値/最低値が必要だと仮定しています（引数として「y」を渡すことでx簡単に取得できます）：yaxis

var getLow = function(list, axis) {
    var low = null;
    for (var i = 0; i < list.length; i++){
        if (low !== null) {
            low = list[i][axis] < low ? list[i][axis] : low;
        } else {
            low = list[i][axis];
        }
    }
    return low;
};

var getHigh = function(list, axis) {
    var high = null;
    for (var i = 0; i < list.length; i++){
        if (high !== null) {
            high = list[i][axis] > high ? list[i][axis] : high;
        } else {
            high = list[i][axis];
        }
    }
    return high;
};

デモンストレーションするフィドルは次のとおりです。http://jsfiddle.net/tKB7y/

于 2013-03-12T05:40:38.007 に答える