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 ...
随机推荐
- vue的预渲染--seo
项目用的是vue,spa,用这个很简单,但是头疼的是重要的seo优化.第一反应是服务器端渲染,但是个人搞了半天后感觉有点难,在项目时间有限的情况下,只能寻找另外的方法,把这个留给项目后在研究. 先用v ...
- Codeforces Round #499 (Div. 1)部分题解（B,C,D）
Codeforces Round #499 (Div. 1) 这场本来想和同学一起打\(\rm virtual\ contest\)的,结果有事耽搁了,之后又陆陆续续写了些,就综合起来发一篇题解. B ...
- Mysql常见问题集锦
缺少libstdc++.so.6库的原因及解决办法 https://blog.csdn.net/u010417185/article/details/69951312 https://www.cnbl ...
- thinkphp5.1控制器初始化函数initialize与构造函数__construct区别
构造函数中子类的构造方法会覆盖父类的构造方法,如果要继承父类的构造方法可以加入parent::__construct(); 例子: //另一种方法,使用构造函数初始化 public function ...
- 时间format函数引爆的知识点和年末有话说
年末感慨 转眼之间,一年的最后一天来了. 2017,技术界貌似正在飞跃.多年的量变终于引起了质变. 人工智能,区块链.对此,我很激动,激动着有点害怕,害怕中有点紧张,还有点渴望.未来的至高点,未来的风 ...
- Spring RestTemplate GET 请求参数
@Test public void testUpdateProfitJson_GET_Params() throws BusinessException { String apiURL="U ...
- Java多线程与并发——生产者与消费者应用案例
多线程的开发中有一个最经典的操作案例,就是生产者-消费者,生产者不断生产产品,消费者不断取走产品. package com.vince; /** * 生产者与消费者案例 * @author Admin ...
- QT源码解析笔记
1. QT如何绘制控件的 QT的绘制控件在QStyleSheetStyle::DrawControl里面,这里会调用默认的QSS来绘制效果 2. 在设置一次QSS以后,将会触发polish事件,里面将 ...
- 偶遇bash 的while read line 的问题
自己开发的过程中,我从数据库里读出来一个值,写入某个临时文件,再让脚本做 cat tmp.log |while read line 的时候 readline每次都是少一行, 最后发现,是换行符的问题 ...
- Hive 基本语法操练（二）：视图和索引操作
1. 视图操作 ------- 1) 创建一个测试表. ``` hive> create table test(id int,name string); OK Time taken: 0.385 ...