Highcharts: passing additional information to a tooltip

问题

I have an array of data points that I am passing to a Highcharts chart that looks like

mydata = [{
    x: 1,
    y: 3,
    nameList: ["name1", "name2"]
}, {
    x: 2,
    y: 4,
    nameList: ["name3", "name4"]
}]

I build the chart like this:

$("#chart").highcharts("StockChart", {
    series: [{
        data: mydata
    }, {
        data: yourdata
    }]
});

Now, I would like to be able to access the nameList array from the shared tooltip, which I'm trying to do as follows:

tooltip: {
    formatter: function() {
        var s = "";
        $.each(this.points, function(i, point) {
            s += point.point.nameList;
        });
        return s;
    },
    shared: true
}

but when examining the point objects in Firebug using console.log(point), I can't seem to find the nameList entry anywhere in them. How could I access this auxiliary information in a shared series tooltip? All help is appreciated.

回答1:

Eureka!

By default, Highcharts will accept several different types of input for the data of a series, including

An array of numerical values. In this case, the numberical values will be interpreted and y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions.

An array of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules.

An array of objects with named values. In this case the objects are point configuration objects as seen below.

However, the treatment of type 3 is different from types 1 and 2: if the array is greater than the turboThreshold setting, then arrays of type 3 won't be rendered. Hence, to fix my problem, I just needed to raise the turboThreshold setting like so:

...
plotOptions: {
    line: {
        turboThreshold: longestArray.length + 1
    }
},
...

and the chart renders the longestArray data properly. Hurray! The only drawback is that there is a considerable time spent rendering the data for much longer arrays due to "expensive data checking and indexing in long series." If any of you know how I might be able to bypass this checking or otherwise be able to speed up the processing of this data, I'd be extremely thankful if you'd let me know how.

回答2:

I can see it here:

tooltip: {
    formatter: function() {
        var s = "";
        console.log(this.points[0].point.nameList); // ["name1", "name2"] 
        $.each(this.points, function(i, point) {
            s += point.point.nameList;
        });
        return s;
    },
    shared: true
}

来源：https://stackoverflow.com/questions/17175632/highcharts-passing-additional-information-to-a-tooltip

标签

javascript

jquery

Highcharts