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中argsort()函数的用法

    由于想使用python用训练好的caffemodel来对很多图片进行批处理分类,学习过程中,碰到了argsort函数,因此去查了相关文献,也自己在python环境下进行了测试,大概了解了其相关的用处, ...

  2. xml ---DOM操作

    package day03.xml; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; ...

  3. Kibana安装与基本用法

    Kibana也是一个开源和免费的工具,他可以帮助您汇总.分析和搜索重要数据日志并提供友好的web界面.他可以为Logstash 和ElasticSearch 提供日志分析的Web界面 它是一个基于浏览 ...

  4. GPU深度发掘(一)::GPGPU数学基础教程

    作者:Dominik Göddeke                 译者:华文广 Contents 介绍 准备条件 硬件设备要求 软件设备要求 两者选择 初始化OpenGL GLUT OpenGL ...

  5. HTML5 canvas beginPath() 方法

    beginPath() 方法开始一条路径,或重置当前的路径.w3school上的解释! 路径是canvas里很重要的一个概念,刚开始学canvas的人对路径理解不是很深,他们在用canvas的时候会乱 ...

  6. c++ 11 sleep()

    #include<chrono>#include<thread> std::this_thread::sleep_for(std::chrono::milliseconds(1 ...

  7. webstorm 2016 激活(转)

    2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框:选择"license server" 输入:http://114.215.133.70:41017 2016 ...

  8. MacOS清除管理员密码

    1.重启 mac ,按住 Command + s 键,进入当用户模式,直达出现黑底白字的屏幕,再松开.输入(重新挂载根文件系统为可读写):mount -uw / 2.然后输入:rm /var/db/. ...

  9. jasoncpp读取jason数据如何判断某一字段是否存在

    如标题,使用json_data.isMember("XXX")来判断 jason_data["XXX"].isNull()是用来判断“XXX”字段后边的值是否为 ...

  10. visual foxpro命令

    根据条件查看已打开dbf表单的记录----LIST ALL FIELDS FOR =''   最后按一下enter键