<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>
<scripttype="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 AverageTemperature'
},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>从
<inputname="control_date" type="text" id="control_date"size="10"
maxlength="10" onclick="new Calendar().show(this);"readonly="readonly" />
</span>
<span>至
<inputname="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>
<scriptsrc="/js/modules/exporting.js"></script>
<div id="container"style="min-width: 400px; height: 400px; margin: 0auto"></div>
</body>
</html>
欢迎大家指正。