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 ...
随机推荐
- viewgroup用addview添加的view不显示问题
先看代码: public class MyviewGroup extends ViewGroup { private final Context context; private View view; ...
- WCF 编程实验室
最近由于项目需要,简单研究了一下.NET WCF编程. 首先,简单说下WCF是什么,WCF 本质上,是一种开发框架.它用来开发类似COM+ .WEB SERVICE 这样“远程方法调用” 功能. 普通 ...
- HTTP权威协议笔记-7.集成点：网关、隧道及中继
.8.1 网关 定义:网关类似与翻译器,它抽象出了一种能够到达资源的方法. 实用:网关可以自动将HTTP流量转换为其他协议,这样使用HTTP协议的一方就不需要了解其他协议,也可实现与其他程序或设备交互 ...
- leetcode 6. ZigZag Conversion
https://leetcode.com/problems/zigzag-conversion/ 题目: 将字符串转化成zigzag模式. 例如 "abcdefghijkmlnpq" ...
- Activiti开发环境配置
Ubuntu安装 1.下载Ubuntu安装镜像 http://www.ubuntu.com/download/ 2.制作ISO U盘安装镜像 不能用Ultraiso制作U盘启动镜像,新版的Ubunt ...
- seajs的CMD模式的优势以及使用
之前有一篇博客非常详细的介绍了sea.js的加载流程,以及源代码实现,链接地址:http://www.cnblogs.com/chaojidan/p/4123980.html 这篇博客我主要讲下sea ...
- 9.5.8 Optimizing InnoDB Disk I/O
如果你数据库设计以及sq操作都是最佳实践,但是你数据库仍然被较重的io活动拖累的较慢,那么试一试看看top或者windows的任务管理器,cpu使用率和工作量低于70%,那么或许是您的硬盘较慢. 1 ...
- [转]配置sonar、jenkins进行持续审查
本文以CentOS操作系统为例介绍Sonar的安装配置,以及如何与Jenkins进行集成,通过pmd-cpd.checkstyle.findbugs等工具对代码进行持续审查. 一.安装配置sonar ...
- cf727e
题意:给你一个模式串和一堆长度相同的不相同的匹配串,问是否有一个方案可以让这个模式串由这些匹配串首尾相连组成,每个串只能出现一次. 思路:还是比较简单的,显然模式串每个位置最多匹配一个匹配串,因为所有 ...
- 图像上传OSS的BUG
今天遇到了一个流上传BUG. 图像经过压缩后传到阿里OSS上后无法显示,下载后发现图像大小为0KB. 调试发现上传的时候发现处理后的流大小正确. 最后发现是流经过图像处理后没有复位. 使用res.Se ...