highcharts与ajax的应用
整理一份完整的例子，以供参考：
<1>页面chart.html：
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>highchart折线图</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script src="highcharts.js"></script>
<script type="text/javascript">
var xset = [];//X轴数据集
var yset = [];//Y轴数据集
/*返回数据*/
function getData(){
$.getJSON('com/ChartServlet',function(data){
$.each(data,function(i,item){
$.each(item,function(k,v){
xset.push(k);
yset.push(v);
});
})
console.log(xset);
console.log(yset);
//根据时间序列生成折线图
showChart(xset,yset);
});
}
/*定义图表*/
function showChart(xset,yset){
var chart = new Highcharts.Chart({
chart: {
renderTo: 'linecontainer',
type: 'line',
marginRight: 130,
marginBottom: 25
}, xAxis: {
categories: xset
},
yAxis: {
title: {
text: '数据'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: '随机时间序列',
data: yset
}]
});
} //执行
getData();
</script> </head> <body>
<!-- 图表显示区 -->
<div id="linecontainer" style="width: 1200px; height: 300px"></div>
</body>
</html></span>
highcharts与ajax的应用的更多相关文章
- Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图
上个图给大家看下效果. 点击 查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程 ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- asp.net中绘制大数据量的可交互的图表
在一个asp.net项目中要用到能绘制大数据量信息的图表,并且是可交互的(放大.缩小.导出.打印.实时数据),能够绘制多种图形. 为此进行了多方调查预研工作,预研过微软的MsChart图表组件.基于j ...
- 数据分析画图,使用原生sql查询数据
1.使用工具 https://www.hcharts.cn/ http://echarts.baidu.com/ 2.子表查询 id 创建时间 内容 处理者 1 2017-02-01 11:11 1 ...
- [django]django+post+ajax+highcharts使用方法
直接代码展示: view.py文件代码 from django.http import JsonResponse #django ajax部分 def ajax_kchart(request): ti ...
- 用ajax动态获取数据显示在highcharts上
html代码(index.html) <html><head> <meta charset="UTF-8" /> <title>Hi ...
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- highcharts联合jquery ajax 后端取数据
Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图 ...
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
随机推荐
- EIGRP-6-EIGRP数据包
EIGRP在与邻居路由器进行通信时,使用以下7种不同类型的数据包: Hello包 确认包 更新包 查询包 响应包 SIA查询包 SIA响应包 更新包,查询包,响应包,SIA查询包和SIA响应包 ...
- git 脚本
echo $PWD message=$1 content='.' if [ ! -n "$1" ] ;then message=`date` message=$message' 推 ...
- idea中导入githup项目
转载大神: https://blog.csdn.net/m0_37630602/article/details/69950528
- Java文件与io——缓冲流
对文件或其它目标频繁的读写操作,效率低,性能差. 使用缓冲流的好处,能够更高效的读写信息,原理是将数据先缓冲起来,然后一起写入或者读取出来. BufferedInputStream:为另一个输入流添加 ...
- Sqoop Import数据库时中文乱码解决方案
首先查看数据库参数编码: mysql> show variables like 'character%'; +--------------------------+--------------- ...
- CentOS6.x之emacs安装配置编译
刚开始学习linux,干学没什么意思,想在linux下写写程序,了解到linux下使用较多的是emacs和vim,在youtobe上分别看了看这两个工具进行开发的视频,个人感觉emacs比较酷一点,所 ...
- Python 配置文件加载且自动更新（watchdog）
安装依赖:pip install watchdog #!/usr/bin/env python3 # -*- coding: utf-8 -*- import logging import os im ...
- Linux远程连接和FTP
远程连接: ssh 用户名@IP地址 输入密码 FTP连接: sftp 用户名@IP 输入密码 远程连接支持所有命令,就相当于操作电脑 FTP连接只支持部分命令: ls.cd.get.put get: ...
- mybatis持久化操作“无效的类型111解决”
mybatis持久化操作时,如果插入数据为null的情况下,由于内部机制问题,会导致报错,导致出现:“无效的类型:1111”示例如下: org.springframework.jdbc.Uncateg ...
- HDU 2586——How far away ？——————【LCA模板题】
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...