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

用ajax动态获取数据显示在highcharts上的更多相关文章

  1. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

  2. 动态获取爱奇艺上传视频mp4格式url地址

    有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...

  3. highcharts的使用：从数据库获取数据显示在图上

    //月产量统计图 function GetHighCharts() { var date = new Date(); var year = date.getFullYear(); var month_ ...

  4. Jquery通过AJAX从后台获取数据显示在表格上（复选）

    代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...

  5. ajax 动态获取json的例子

    1.前台脚本: //用于切换图片列表的ajax function changePhoto(title,hotelId){ $.ajax({ contentType: "application ...

  6. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  7. jquery select 列表 ajax 动态获取数据 模糊查询 分页

    最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...

  8. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  9. echarts在.Net中使用实例(二) 使用ajax动态加载数据

    通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...

随机推荐

  1. linux 命令总结

    ①用find命令查找并删除文件 用脚本创建测试数据: [root@greymouster ceshidata]# for n in `seq 10`> do > date -s " ...

  2. 如何禁止 Mac OS X 在外接设备上生成 .DS_Store 文件？以及如何批量删除 .DS_Store 文件？

    如何禁止 Mac OS X 在外接设备上生成 .DS_Store 文件?以及如何批量删除 .DS_Store 文件?原文链接:http://www.java2class.net/bbs/viewthr ...

  3. css小知识之伪元素

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. webdriver对象定位方法

    webdriver提供了一系列的对象定位方法,常用的有以下几种 · id · name · class name · link text · partial link text · tag name ...

  5. Sql Server隔离级别(2)

    Sql Server2005之后,引入了一个新的隔离级别Snapshot(Read Committed Snapshot Isolation (RCSI))和(Snapshot Isolation ( ...

  6. 关于UI系统的问题

    function OnGUI(){ GUI.skin = myskin; if(GUILayout.Button("add_component",GUILayout.Height( ...

  7. fedora 24下修改IP

    在ROOT环境下 cd /etc/sysconfig/network-scripts 找到类似  ifcfg-enp1s0的文件 sudo vi ifcfg-enp1s0 HWADDR=XX:XX:X ...

  8. 使用小米天气API获取天气信息

    1. URL部分 以下url中"%s"代表的是城市Id,比如北京的cityId=101010100: //获取未来五天预报信息,红色部分信息不需要 WEATHER_DATA_URL ...

  9. mac系统，git上刚刚checkout出来的文件，一检查，发现已经被修改过了，怎么破？？？

    如下图中所示: 事实上,checkout之后什么都还没做,这些文件为何就被修改? 检查一下别的电脑上所存放的同一套源码,原来出问题的文件都是同名文件,只不过是有大小写区分而已!!! linux系统可以 ...

  10. HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-Integrated”

    网站发布到IIS上,访问时出现错误 原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始->所有程序->附件->右键点击“命令提 ...