<!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:[]}";
}
}