Highcharts使用jsonp格式数据demo

<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>
欢迎大家指正。
Highcharts使用jsonp格式数据demo

相关推荐
