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

How to label Highcharts tooltip from json data?

本文关键字：Highcharts 工具提示 数据 json      更新时间：2023-09-26

我将数据作为JSON传递给highcharts，这个JSON来自java方法，所以我不能改变这个…所以请不要建议改变JSON格式…我的highchart代码如下…

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
    }]
});

我试图把平台名称放在工具提示上，因为我悬停在…但是我找不到任何方法……另外，我是否有办法在许多平台上创建传奇……现在我只有一个名为"Data"的图例。

jfiddle可以在这里找到:http://jsfiddle.net/QTJb7/

你需要在点定义中使用对象而不是数组，并在$.map中添加参数。

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

提示:

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/

相关文章：