highcharts - Highcharts：如何在“columnrange”类型的格式化程序中访问范围值？

Question

我想自定义我的 Highcharts 图表的工具提示。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/

Answer 1

如果您在工具提示中使用共享选项，那么您需要使用 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;
        }
    },

Answer 2

此代码适用于工具提示的格式化程序：

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/

Answer 3

它们不只是point[0]和point[1]分别为低和高吗？

Answer 4

试试这个，为你的格式化功能：

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()分别返回低点/高点。

这是实现它的一种方法，但您可以自由使用您喜欢的任何算法。

我假设您想要最高/最低x值（您可以y通过传入 'y' 作为axis参数轻松获得）：

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/

Answer 5

要使用基本的 pointFormat 属性，您可以执行以下操作：

tooltip: { pointFormat: '{point.low}' }