[英]Highcharts with JSON data and multiple series
我正在嘗試渲染Highcharts折線圖,但在頁面加載時出現一些問題讓系列顯示出來。 Firebug沒有顯示任何錯誤,所以我猜這是我的數據結構如何或如何傳遞給Highcharts的問題。
數據來自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);
});
這是一個更好的例子。 我真正想要顯示的是'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
]
}
}
你應該看看這個: http : //api.highcharts.com/highcharts#series.data
如果將每個點指定為對象,則可以向每個點添加所需的任何屬性,並通過this.point在工具提示格式化程序中訪問它。
使用當前格式化的數據
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);
});
這應該產生:
seriesArr : [{
name : 'Total',
data : [
{y:9.39, n:9.62},
...
]
},
...
]
然后在你的格式化函數中,你可以將每個作為this.point.y或this.point.n來訪問
tooltip: {
formatter: function () {
return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n;
}
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.