开发者

Highcharts - advanced tooltip functionality needed

I have an issue when plotting using an area graph with stacking normal. My last question I asked here was: Highcharts help - Area chart stacking

Which was basically asking how to plot the values to stack without normalizing the data. I was told I could subtract the one series from the other to make the graph appear properly, however, the values when you hover are skewed because of this calculation.

Example: Before:

Series Total:      [0,0,0,1,1,2,3]
Series In-Service: [0,0,0,0,0,1,2]

So I fix the data to graph it:

Series Total:      [0,0,0,1,1,1,1]
Series In-Service: [0,0,0,0,0,1,2]

Now it graphs fine but the tool tip is wrong, for example the last data point should be:

Series Total:      3
Series In-Service: 2

But it shows:

开发者_Python百科
Series Total:      1
Series In-Service: 2

And since the tooltip does not have access to the other points we can't do a fix calculation to display it. Unless I use shared: true, but I cant use shared because the tooltip is too massive because of all the series I have.

Please ask any questions if I am unclear, I really need some help.


Use a list of objects when setting the series data. You can add additional options to the datapoint object and access it from the tooltip formatter.

See http://jsfiddle.net/jgdreyes/JvSBk/ for an example.

var seriesTotal = [
    {x: 0, y: 0, customTooltip: 0},
    {x: 1, y: 0, customTooltip: 0},
    {x: 2, y: 0, customTooltip: 0},
    {x: 3, y: 1, customTooltip: 1},
    {x: 4, y: 1, customTooltip: 1},
    {x: 5, y: 1, customTooltip: 2},
    {x: 6, y: 1, customTooltip: 3}
];

var chart = new Highcharts.Chart({

    series: [
        {data: seriesTotal}
    ],

    tooltip: {
        formatter: function() {
            //access customTooltip option
            return this.point.customTooltip;
        }
    },
});


Although perhaps not optimal, I've done the following in similar situations:

In my config, I've setup the tooltip formatter to use the point name.

tooltip: {
  formatter: function() {
    return this.point.name;
  }
}

And then as I'm adding points, I simply set the name with my custom HTML as in...

// get x, y and other vars
series[0].addPoint({x: x, y: y, name: 'In Service: ' + inService }, false);
series[1].addPoint({x: x, y: y, name: 'Total: ' + total }, false);

And of course you would use the non-adjusted value for the total.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜