Highcharts使用jsonp格式数据demo

来源：互联网发布：一个算法应具备的特性编辑：程序博客网时间：2024/06/05 05:40

<html>

<head>

<title>Highcharts Example</title>

</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>

<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>

function getUrlShowData()

{

var begin = document.getElementById("control_date").value;

var end = document.getElementById("control_date2").value;

ShowAjaxDate.init(begin,end);

}

</script>

</div>

<scriptsrc="/js/modules/exporting.js"></script>

</body>

</html>

欢迎大家指正。

0 0