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 ...
随机推荐
- HttpClient接口测试之会话保持
HttpClient接口测试之会话保持 HttpClient4.X自带会话保持功能,使用同一个HttpClient未关闭的连接即可保持登陆会话,如果多个HttpClient想要使用一个登陆会话 ...
- HTML DOM Event对象
我们通常把HTML DOM Event对象叫做Event事件 事件驱动模型 事件源:(触发事件的元素)事件源对象是指event对象 其封装了与事件相关的详细信息. 当事件发生时,只能在事件函数内部访问 ...
- GDT 学习笔记逻辑地址和线性地址计算，因为是自学，所以这只是我的个人理解，不对的请大家指导。
在 bochs 刚开始的时候 gdt 是未知的,需要通过实模式的16位代码段初始化 gdt 信息, 在 lgdt 指令之后,即可以使用程序自定义的 GDT 表了. 假如:gdt 初始地址为 0x7c7 ...
- sql 2012 操作EXCEL 2013
确认是否有Microsoft.ACE.OLEDB.12.0数据接口 --进行配置: EXEC sp_configure 'show advanced options', 1 GO RECONFIGUR ...
- 如何在EF CodeFirst中使用唯一约束（Unique）
一直用EF Fluent Api 做MapConfiguration 所以遇到了唯一约束这个瓶颈 使用唯一约束的两种方式: 方式1 自定义唯一约束 [AttributeUsage(AttributeT ...
- 【补充版】HashMap（根据value筛选查找）
HashMap查找之根据Value查找 一般大家都知道对于HashMap而言都是通过key来进行查找.找到了key自然对应的value也就一并找到了.但是有些情况下就需要通过value来进行判断查找. ...
- Dalvik指令格式
一段Dalvik汇编代码由一系列Dalvik指令组成,指令语法由指令的位描述与指令格式 标识来决定.位描述约定如下: 每16位的字采用空格分隔开来每个字母表示四位,每个字母按顺序从高字节开始,排列到低 ...
- expect使用demo
#!/usr/bin/expect set timeout set ip [lindex $argv ] spawn ssh root@$ip expect { "yes/no" ...
- C# 配置文件 AppSettings和ConnectionStrings的区别
web.config是web应用程序的配置文件,为web应用程序提供相应配置(B/S).app.config是桌面应用程序的配置文件,为桌面应用程序提供相应配置(C/S).Configuratio ...
- app进入后台之后接收到通知,点进去进入新的页面,再次进入后台,再点击通知进入页面(,两次通过通知进入的页面,创建了两次,会多一个页面,)解决办法监听
在点击通知进入的页面的 //UIApplicationWillResignActiveNotification是app即将进入后台的方法 //增加监听使它在进入后台之前pop上一个页面 - (void ...