Highcharts jsonpフォーマットデータdemoを使用
5292 ワード
<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>皆さんのご指摘を歓迎します.