JQuery以及highchart与后台数据交互
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html debug="true"> <head> <title>Highcharts Demo - Basic line</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- meta http-equiv="X-UA-Compatible" content="chrome=1" --> <link rel="shortcut icon" href="/favicon.ico" /> <script type="text/javascript" src="highcharts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script> <!-- Highslide code --> <script type="text/javascript" src="/highslide/highslide-full.min.js"></script> <script type="text/javascript" src="/highslide/highslide.config.js" charset="utf-8"></script> <script type="text/javascript"> var example = 'line-basic', theme = 'skies'; </script> <script type="text/javascript" src="/demo/scripts.js"></script> <link rel="stylesheet" href="/templates/yoo_symphony/css/template.css" type="text/css" /> <link rel="stylesheet" href="/templates/yoo_symphony/css/variations/brown.css" type="text/css" /> <link href="/demo/demo.css" rel="stylesheet" type="text/css" /> <script src="charts/chart1.js" type="text/javascript"></script> </head> <body> <script src="highcharts/highcharts.js"></script> <script src="highcharts/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> <div style="margin: 1em"> <div class="buttons"> <div class="highslide-maincontent"></div> </div> </div> </body> </html>
(function($) { // encapsulate jQuery
$(function() {
var chart;
$(document)
.ready(
function() {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'line',
marginRight : 130,
zoomType : 'xy',//
marginBottom : 25
},
title : {
text : '交易与税收情况',
x : -20
// center
},
subtitle : {
text : ' ',
x : -20
},
xAxis : {
categories : [ '1月', '2月', '3月', '4月',
'5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月', '1月', '2月',
'3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
},
yAxis : {
title : {
text : '金额 (万元)'
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
formatter : function() {
return '<b>' + this.series.name
+ '</b><br/>' + this.x + ': '
+ this.y + '万元';
}
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
series : [
{
name : '2011年纳税总额',
type : 'column',
data : [ 1.0, 3.9, 3.5, 4.5, 4.4,
4.5, 9.4, 11.5, 5.3, 5.3,
11.5, 5.3, 5.3 ]
},
{
name : '2011年交易总额',
data : [ 7.0, 6.9, 9.5, 14.5, 18.2,
21.5, 25.2, 26.5, 23.3,
18.3, 18.3, 18.3 ]
},
{
name : '2012年纳税总额',
type : 'column',
data : [ 8.0, 5.9, 7.5, 16.5, 16.2,
27.5, 23.2, 21.5, 21.3,
18.3, 18.3, 18.3 ]
},
{
name : '2012年交易总额',
data : [ 8.0, 9.9, 19.5, 4.5, 8.2,
21.5, 4.2, 36.5, 13.3,
18.34, 18.3, 18.3 ]
} ]
});
var district = encodeURI(encodeURI("北塘区"));
var city = encodeURI(encodeURI("无锡市"));
var industry = encodeURI(encodeURI("零售业"));
var str = "53.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4";
var buf;
var data0 = [ ];
var data1 = [ ];
var data2 = [ ];
var data3 = [ ];
function getForm() {
jQuery.getJSON(
'taxStatisticAction.do?actionType=getDetailStatisticData&district='
+ district + '&city=' + city
+ '&industry=' + industry
+ '&year=2011', null, function(
data) {
buf = data.TaxAmount.split(",");
for (i = 0; i < buf.length; i++) {
data0[i] = parseFloat(buf[i]);
}
chart.series[0].setData((data0),
true);
buf = data.TotalAmount.split(",");
for (i = 0; i < buf.length; i++) {
data1[i] = parseFloat(buf[i]);
}
chart.series[1].setData((data1),
true);
});
jQuery.getJSON(
'taxStatisticAction.do?actionType=getDetailStatisticData&district='
+ district + '&city=' + city
+ '&industry=' + industry
+ '&year=2012', null, function(
data) {
buf = data.TaxAmount.split(",");
for (i = 0; i < buf.length; i++) {
data2[i] = parseFloat(buf[i]);
}
chart.series[2].setData((data2),
true);
buf = data.TotalAmount.split(",");
for (i = 0; i < buf.length; i++) {
data3[i] = parseFloat(buf[i]);
}
chart.series[3].setData((data3),
true);
});
}
getForm();
// $(document).ready(function() {
// // 每隔3秒自动调用方法，实现图表的实时更新
// window.setInterval(getForm, 3000);
//
// });
});
});
})(jQuery);
后台
public String getDetailStatisticData(String city, String district,
String industry,String year) {
List<Statistic> statisticList = statisticDAO.findDetailStatisticData(
city, district, industry,year);
JSONHelper json = new JSONHelper();
json.setSuccess(true);
String TaxAmount = "";
String TotalAmount="";
if (statisticList != null || statisticList.size() != 0) {
for (int i = 0; i < statisticList.size(); i++) {
Statistic statistic = statisticList.get(i);
if (i != (statisticList.size() - 1)) {
TaxAmount = TaxAmount + statistic.getTaxAmount() + ",";
} else {
TaxAmount = TaxAmount + statistic.getTaxAmount();
}
if (i != (statisticList.size() - 1)) {
TotalAmount = TotalAmount + statistic.getTotalAmount() + ",";
} else {
TotalAmount = TotalAmount + statistic.getTotalAmount();
}
}
json.AddItem("TaxAmount", TaxAmount);
json.AddItem("TotalAmount", TotalAmount);
String jsons = "";
jsons = json.toString2();
return jsons;
} else {
return "{success:true,totalCount:0,data:[]}";
}
}