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. python 面向对象和类成员和异常处理

    python 面向对象 你把自己想象成一个上帝,你要创造一个星球,首先你要把它揉成一个个球,两个直径就能创造一个球 class star: '''名字(name),赤道直径(equatorial di ...

  2. tp框架总结（三）

    一.跨模块的调用 class IndexAction extends Action{ public function index(){ $user = new UserAction();   // 类 ...

  3. 控制input框不能更改里面的内容

    <input type="text" disabled="true"/> 这个是给input设置一个属性.控制它可以不能改变里面的内容.已经试过了! ...

  4. C++：名字查找先于类型检查

    Sub-Title: Name Hiding. "In C++, there is no overloading across scopes - derived class scopes a ...

  5. python---IO多路复用

    这里的IO是指网络IO python中通过select模块实现IO多路复用,select模块中有select.poll.epoll等方法 下面例子以select模块实现IO多路复用 仅仅只有IO多路复 ...

  6. C# 标准差计算

    if (numberList.Any()) { exEntity.MinValue = numberList.First().NumberValue.ToString(); exEntity.MaxV ...

  7. ios LoadView 方法

    当ViewController中的View不通过nib文件而是自己来创建的时候需要重载LoadView方法.否则不需要重载LoadView方法.

  8. Loadrunner开发测试脚本

    Loadrunner开发测试脚本 开发测试脚本可以通过录制,也可以手动开发,建议能录制的尽量录制,省时省力,不能录制的只能费力自己开发了,具体看项目情况来决定. 使用Loadrunner开发脚本过程中 ...

  9. VI的一些快捷键

    . $ ctags –R --c-types=+px ($ 为Linux系统Shell提示符) .$ vi –t tag (请把tag替换为您欲查找的变量或函数名) .:ts (ts 助记字:tags ...

  10. 文本换行word-wrap、word-break与white-space

    本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c9 ...