带有 JSON 数据和多个系列的 Highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15666557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts with JSON data and multiple series
提问by Scott Gearhart
I'm trying to render a Highcharts line chart, but am having some issues getting the series to show up when the page loads. Firebug doesn't show any errors, so I'm guessing that it's a problem with how my data is structured or how it is being passed to Highcharts.
我正在尝试渲染 Highcharts 折线图，但是在页面加载时显示系列时遇到了一些问题。Firebug 没有显示任何错误，所以我猜测这是我的数据的结构方式或如何将其传递给 Highcharts 的问题。
The data comes from a JSON file, with the variables being loaded using a method I got from another site... My data is a numeric y value for each month, with customTooltip being additional data I want to show on hover.
数据来自一个 JSON 文件，使用我从另一个站点获得的方法加载变量......我的数据是每个月的数字 y 值，customTooltip 是我想在悬停时显示的附加数据。
$.getJSON("json/mydata.txt",function(jdata) {
var arr = [];
$.each(jdata, function(key, val) {
var y = val.y;
var name = key;
var customTooltip = val.n;
arr.push({y: y, customTooltip: customTooltip})
})
var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]};
var options = {
chart: {
renderTo: 'fallcontainer',
defaultSeriesType: 'line'
},
title: {
text: 'Monthly Rate',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Jan 12', 'Feb 12', 'Mar 12']
},
yAxis: {
title: {
text: 'Rate',
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min:0
},
legend: {
layout: 'vertical',
align:'right',
verticalAlign:'middle',
x:0,
title:'Care Setting'
},
plotOptions: {
},
credits: {
enabled:false
},
series:[]
};
options.series.push(jseries);
var chart = new Highcharts.Chart(options);
});
Here's a better example. What I really want to display is the 'y' as the y-axis with the 'n' and 'y' data on the hover. JSONLint said this is valid.
这是一个更好的例子。我真正想要显示的是 'y' 作为 y 轴，悬停时带有 'n' 和 'y' 数据。JSONLint 表示这是有效的。
{
"Total": {
"y": [
9.39,
90.35,
90.36,
92.69,
93.02,
90.32,
90.6,
9.09,
9.5,
90.69,
9.6,
90.69,
9.53,
6.92
],
"name": "Total",
"n": [
962,
969,
999,
233,
235,
968,
999,
963,
989,
293,
986,
293,
989,
908
]
},
"Cat1": {
"y": [
6.38,
6.63,
90.3,
9.65,
90.25,
8.99,
92.39,
99.39,
9.28,
99.35,
99.36,
93.38,
8.69,
8.03
],
"name": "Cat1",
"n": [
6,
6,
90,
90,
90,
8,
93,
93,
99,
93,
93,
96,
99,
9
]
}
}
回答by Scott Gearhart
You should look at this: http://api.highcharts.com/highcharts#series.data
你应该看看这个：http: //api.highcharts.com/highcharts#series.data
If you specify each point as an object, you can add any property you want to each point and access it in your tooltip formatter through this.point.
如果将每个点指定为对象，则可以向每个点添加所需的任何属性，并通过 this.point 在工具提示格式化程序中访问它。
With the data as currently formatted
使用当前格式化的数据
var seriesArr = [];
$.each(jdata, function(key, data) {
var series = {name : key, data : []};
$.each(data.y, function(index, value) {
series.data.push({y: value });
});
$.each(data.n, function(index, value) {
series.data[index].n = value;
});
seriesArr.push(series);
});
This should yield :
这应该产生：
seriesArr : [{
name : 'Total',
data : [
{y:9.39, n:9.62},
...
]
},
...
]
Then in your formatter function, you can acccess each as this.point.y or this.point.n
然后在您的格式化程序函数中，您可以访问每个作为 this.point.y 或 this.point.n
tooltip: {
formatter: function () {
return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n;
}
},
