如何从json数据标记Highcharts工具提示？

Question

i am passing data as JSON to highcharts this JSON comes from a java method so i cant change this...so please dont suggest to change JSON format... my code for highchart is below...

var json = [{
    "value": 12,
    "name": "platform1",
    "key": "event4"
}, {
    "value": 10,
    "name": "platform1",
    "key": "event1"
}, {
    "value": 14,
    "name": "platform1",
    "key": "event3"
}, {
    "value": 9,
    "name": "platform1",
    "key": "event2"
}, {
    "value": 13,
    "name": "platform3",
    "key": "event4"
}, {
    "value": 13,
    "name": "platform3",
    "key": "event1"
}];
var processed_json = new Array();
$.map(json, function (obj, i) {
    processed_json.push([obj.key, parseInt(obj.value), obj.name]);
});

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        type: "category"
    },
    tooltip: {
        formatter: function () {
            return 'Branch: <b>' + this.series.name +
                '</b><br/>Platform: ' + this.point.y;
        }
    },
    series: [{
        name: 'Data',
        data: processed_json
    }]
});

i am trying to put platform name on the tooltip as i hover over...but i can not find any way to do that...plus is there any way i can create legends as number of platforms...right now i only have one legend named "Data".

jfiddle can be found here : http://jsfiddle.net/QTJb7/

Answer 1

You need to use object instead of array, in point definition and add paramter in your $.map.

$.map(json, function (obj, i) {
    processed_json.push({name: obj.key,y: parseInt(obj.value),customName : obj.name });
});

tooltip:

tooltip: {
    formatter: function () {
        return 'Branch: <b>' + this.series.name +
            '</b><br/>Platform: ' + this.point.name + ' <br> name ' + this.point.customName;
    }
},

http://jsfiddle.net/QTJb7/1/