Question

highcharts的columnrange图的tooltip修改

希望能在鼠标点上去显示出来的部分，每一段加一个不同的文字，例如 实际： a~b：10°C~20°C
注意：根据数据每一段不同
改不出来
$(function () { $('#container').highcharts({ chart: {type: 'columnrange', inverted: true }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes' ] }, yAxis: { title: { text: 'Temperature ( °C )'}}, tooltip: { valueSuffix: '°C'},series: [ { name: '实际',data: [[1, 9.4,10], [1, 10,20], [1, 20,30], [2, 9.4,10], [2, 10,20], [3, 22.6,25],[3, 25,30] ] }, { name: '计划',data: [[1, 9.4,10], [1, 10,20], [1, 20,30], [2, 9.4,10], [2, 10,20], [3, 22.6,25],[3,25,30] ] }] });});

Answer 1

你把tooltip修改成

tooltip: {                                                         
    pointFormat: '实际: <b>{point.y}</b>'
}

追问

实际： a~b：10°C~20°C
是要有前面的a~b。。而且每一段的a~b不一样

追答

你是要显示成 "实际： a~b：10°C~20°C " 这样?然后a~b是变化的?那这个a和b是从哪取的?

追问

嗯嗯。。a~b是变化的。。a~b是后台处理传过来，你帮我看看能不能每一段如何绑定对应的a~b。。

追答

如果是绑值的话,你在chart里面加入events这段就行因为你这个series里面就两个值我就写了两个循环,如果多的话就写嵌套循环行了

chart: {
    type: 'columnrange',
    inverted: true,
    events: {
        load: function () {
            for(var i = 0; i < this.series[0].data.length ; i++){
                this.series[0].data[i].ss = 11;
            }
            for(var i = 0; i < this.series[1].data.length ; i++){
                this.series[1].data[i].ss = 22;
            }
        }
    }
},

然后用的时候就

tooltip: {
    pointFormat: '<b>{point.ss}</b>'
},