Highchart使用json格式数据lineDemo
<html>
<head>
<title>Highcharts Example</title>
<script type="text/javascript" src="/js/jquery-1.71.min.js"></script>
<script type="text/javascript" src="/js/Calendar3.js"></script>
</head>
<body>
<script type="text/javascript">
var ShowAjaxDate = {
init: function(begin, end) {
this.begin = begin;
this.end = end;
this.getNewBuy();
},
getNewBuy: function() {
var _this = this;
var param = {
begin: this.begin,
end: _this.end,
callback: 'ShowAjaxDate.setAjaxDate'
};
$.ajax({
url: ' /manage/newcustomflowquery.jsonp',
data: param,
dataType: 'script',
success: function(r) {
}
});
},
setAjaxDate: function(r) {
var allVisits = [];
var showitem1="下单量";
var pvVisitors = [];
var showitem2="pv";
var uvVisitors = [];
var showitem3="uv";
var datetime = [];
for(i=0;i< r.listCustomFlowQuery.length;i++)
{
allVisits.push(r.listCustomFlowQuery[i].onlProNum);
pvVisitors.push(r.listCustomFlowQuery[i].pv);
uvVisitors.push(r.listCustomFlowQuery[i].uv);
datetime.push(r.listCustomFlowQuery[i].dateTime);
}
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
credits: {
enabled: false
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '次数'
}
},
legend: {
align: 'left',
verticalAlign: 'top',
x: 60,
y: 10,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
}, {
},{
}]
};
options.xAxis.categories=datetime;
options.series[0].name = showitem1;
options.series[1].name = showitem2;
options.series[2].name = showitem3;
options.series[0].data = allVisits;
options.series[1].data = pvVisitors;
options.series[2].data = uvVisitors;
var chart = new Highcharts.Chart(options);
}
};
</script>
<div style="text-align: center;margin: 0 auto">
<span>选择查询日期：</span> <span>从
<input name="control_date" type="text" id="control_date" size="10"
maxlength="10" onclick="new Calendar().show(this);" readonly="readonly" />
</span>
<span>至
<input name="control_date2" type="text" id="control_date2" size="10"
maxlength="10" onclick="new Calendar().show(this);" readonly="readonly"/>
</span>
<input type="button" name="button" id="button" value="查询" onclick="getUrlShowData();" />
<script>
function getUrlShowData()
{
var begin = document.getElementById("control_date").value;
var end = document.getElementById("control_date2").value;
ShowAjaxDate.init(begin,end);
}
</script>
</div>
<script src="/js/highcharts.js"></script>
<script src="/js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Highchart使用json格式数据lineDemo的更多相关文章
- iOS开发之JSON格式数据的生成与解析
本文将从四个方面对IOS开发中JSON格式数据的生成与解析进行讲解: 一.JSON是什么? 二.我们为什么要用JSON格式的数据? 三.如何生成JSON格式的数据? 四.如何解析JSON格式的数据? ...
- 解析json格式数据
实现目标 读取文件中的json格式数据,一行为一条json格式数据.进行解析封装成实体类. 通过google的Gson对象解析json格式数据 我现在解析的json格式数据为: {",&qu ...
- ios网络学习------6 json格式数据的请求处理
ios网络学习------6 json格式数据的请求处理 分类: IOS2014-06-30 20:33 471人阅读 评论(3) 收藏 举报 #import "MainViewContro ...
- fastJson java后台转换json格式数据
什么事JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Progra ...
- ajax请求后台，返回json格式数据，模板！
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...
- 使用C#中JavaScriptSerializer类将对象转换为Json格式数据
将对象转换为json格式字符串: private JavaScriptSerializer serializer = new JavaScriptSerializer(); protected voi ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- Ajax返回html和json格式数据
Ajax可以返回text和xml格式 可以用Ajax返回大段的html文本和json格式的字符串,然后用eval()方法 转化为json对象 php中的json编码:json_encode(); ph ...
- 实现android上解析Json格式数据功能
实现android上解析Json格式数据功能,该源码转载于安卓教程网的,http://android.662p.com ,个人感觉还不错的,大家可以看看一下吧. package com.practic ...
随机推荐
- 定制自己的linux系统
算是总结式文档,以备后忘 先说一下背景,一开始我就知道有这个任务,同时我自己也非常感兴趣,打算去研究研究 于是才同意接这个任务,但是我的原意是从头开始搭建系统,也就是lfs 但接到任务后,由于种种原因 ...
- web初学之重定向与请求转发
重定向与请求转发的问题 (1)RequestDispatcher是通过调用HttpServletRequest对象的getRequestDispatcher()方法得到的,是属于请求对象的方法. (2 ...
- try it, then you know . Emacs
原来Emacs能做时间管理 http://sachachua.com/blog/2012/07/transcript-emacs-chat-john-wiegley/ http://blog.csd ...
- 记一次项目中的css样式复用
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...
- MVC使用内建的Form辅助器方法创建Select元素
第一种方法: List<SelectListItem> statusItems = new List<SelectListItem>(); statusI ...
- 在php里写sql查询需要注意的事情
---恢复内容开始--- 今天往php里写了一条sql查询, $sql = "select * from videos where vuser=".$u: $ret = mysql ...
- 线性代数和numpy——黑板客老师课程学习
一.代数是什么 代数->数的抽象表示->向量空间(线性空间) 线代->线性代数 关系: 向量空间之间和内部转换是通过线性变换. 实数——一维空间的点 复数——二维空间的点 如果两个向 ...
- 分享一个Object.defineProperties 定义一个在原对象可读可写的方法
function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...
- Ruby-递归和尾递归
递归和迭代的区别 递归: 1)递归就是在过程或函数里面调用自身; 2)在使用递归时,必须有一个明确的递归结束条件,称为递归出口. 迭代: 利用变量的原值推算出变量的一个新值.如果递归是自己调用自己的话 ...
- 【C#】项目优化实战
[C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...