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 ...
随机推荐
- mysql系统数据库
mysql系统数据库主要存储了一些存储MySQL服务的系统信息表.一般情况下mysql库的表都是MYASIM引擎,除非个别情况.mysql库的表的作用大致可以分为以下几类: (1)授权系统表 (2)系 ...
- InnoDB Checkpoints
检查点的工作机制: innodb会自动维护一个检查点的机制,叫做 fuzzy checkpointing(当然sharp checkpoint也是检查点之一),fuzzy checkpointing就 ...
- php获取时间问题，用默认配置读到本地时间。。。。。
用date获取到时间有8小时时差 因为php用date获取到的是格林威治时区的时间,而大陆时间和格林威治时间有8个小时时差,所以.... 修改:网上有各种修改方式: 比如:在程序中添加时间的初始化的语 ...
- java 枚举
DK1.5引入了新的类型——枚举.在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便. 用法一:常量 在JDK1.5 之前,我们定义常量都是: publicstaticfianl... ...
- 带名称空间的xml数据查询
<gpx xmlns="http://www.topografix.com/GPX/1/1" creator="MapSource 6.5" versio ...
- jquery 序列化
//生成发件人Json信息 function buildSenderInfoJson() { var sendName = $("#SendName").val(); var se ...
- 深入理解js——自由变量和作用域链
自由变量:在A作用域中使用变量X,却没有在A作用域中声明(在其他作用域中声明),对于A作用域来说X就是一个自由变量. var x=10; function fn(){ var b=20; consol ...
- 设置centos7默认运行级别
1.查看当前运行级别 systemctl get-default 2.设置命令行运行级别 systemctl set-default multi-user.target 3.设置图形化运行级别 sys ...
- NetworkComms 文件上传下载和客户端自动升级（非开源）
演示程序下载地址:http://pan.baidu.com/s/1geVfmcr 淘宝地址:https://shop183793329.taobao.com 联系QQ号:3201175853 许可:购 ...
- Content is not allowed in prolog ---UTF-8 无bom