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. xml---sax操作

    <?xml version="1.0" encoding="UTF-8"?> <书架> <书> <书名>书名1& ...

  2. phoenix将hdfs数据导入hbase

    http://phoenix.apache.org/bulk_dataload.html

  3. Rsa加解密Java、C#、php通用代码 密钥转换工具

    之前发了一篇"TripleDes的加解密Java.C#.php通用代码",后面又有项目用到了Rsa加解密,还是在不同系统之间进行交互,Rsa在不同语言的密钥格式不一样,所以过程中主 ...

  4. 磁盘阵列(RAID)实例

    raid技术分类可以分为基于软件raid技术和基于硬件raid技术 raid又分为raid-0.raid-1.raid-5和raid-10 Raid有”廉价磁盘冗余阵列”的意思,就是利用多块廉价的硬盘 ...

  5. Unity 几种优化建议

    转: http://user.qzone.qq.com/289422269/blog/1453815561?ptlang=2052 Unity 几种优化建议 最简单的优化建议: 1.PC平台的话保持场 ...

  6. document.createElement()方法

    document.createElement()是在对象中创建一个对象,主要和appendChild() 方法或者insertBefore() 方法联合使用. appendChild() 方法在节点的 ...

  7. C#Json序列化数据库对象

    //该方法使用NewtonJson.dll插件,需要引用 //using Newtonsoft.Json;//using Newtonsoft.Json.Converters; var data = ...

  8. 循序渐进Python3（八） -- 1 -- socket进阶

    IO多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. Linux中的 select,poll,epoll 都 ...

  9. [python] ORM 第一次注释

    不懂的东西还太多,就当是自己监督自己吧 #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'Michael Liao' impor ...

  10. 注解式开发spring定时器

    1:spring 配置文件中增加这句    <task:annotation-driven/>  2:确保扫描程序能够扫描后  下面第3步骤的java类    <context:co ...