Question

我想自定义Highcharts图表的工具提示。 y轴的类型为“列范围”，即它具有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}' }

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

5 个答案: