用ajax动态获取数据显示在highcharts上
html代码(index.html)
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(function(){
var datas={
title:{text: '月平均气温'},
subtitle:{text: 'Source: runoob.com'},
xAxis:{categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']},
yAxis:{
title: {text: 'Temperature (\xB0C)'},
plotLines: [{value: 0,width: 1,color: '#808080'}]
},
tooltip:{valueSuffix: '\xB0C'},
legend:{ layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0},
series:[{
name:'',
data:""
},{
name:'',
data:''
},{
name:'',
data:''
},{
name:'',
data:''
}
]
};
$.ajax({
url:"json1.json",
dataType:"json",
success:function(data){
var i=0;
//console.log(data);
// var data = eval("(" + data + ")");
//console.log(data.series[i]);
select_arr=[];
insert_arr=[];
replace_arr=[];
delete_arr=[];
select_arr.push(data.serie[0].name,data.serie[0].data);
insert_arr.push(data.serie[1].name, data.serie[1].data);
replace_arr.push(data.serie[2].name,data.serie[2].data);
delete_arr.push(data.serie[3].name,data.serie[3].data);
console.log(select_arr);
datas.series[0].name=insert_arr[0];
datas.series[1].name=insert_arr[0];
datas.series[2].name=replace_arr[0];
datas.series[3].name=delete_arr[0];
datas.series[0].data=insert_arr[1];
datas.series[1].data=insert_arr[1];
datas.series[2].data=replace_arr[1];
datas.series[3].data=delete_arr[1];
console.log(datas.series[0].name);
$('#container').highcharts(datas);
}
});
})
</script>
</body>
</html>
json数据(json1.json)
{"serie":[
{
"name": "Tokyo",
"data": [2.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
"name": "New York",
"data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 14.8,24.1, 20.1, 14.1, 8.6, 2.5]
},
{
"name": "Berlin",
"data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
"name": "London",
"data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}]
}
