js jspページへの値のループ
7756 ワード
</pre> ， ， ， ， js jsp ， ， ， highcharts， highcharts ， <p></p><p></p><p>jsp ：</p><p></p><pre name="code" class="html"><!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html lang="en">
<head>
<link rel="stylesheet" href="${baseURL}/css/client/statistics.css" type="text/css"/>
</head>
<body>
<div class="container" style="width:1265px;padding:20px 0px">
<div class="row">
<div class="col-xs-6">
<div style="padding-bottom:6px;border-bottom:1px solid #ddd">
<div id="chart11" style="height:240px;margin-top:32px;"></div><!-- -->
<div id="chart12" style="height:240px;margin-top:32px;display:none"></div><!-- -->
<div id="chart13" style="height:240px;margin-top:32px;display:none"></div><!-- -->
</div>
</div>
</div>
<script type="text/html" id="dataTemplate">
<table class="table table-bordered" style="font-size:13px;">
<thead>
<tr>
<th> </th>
<?for(i=0;i<data.categories.length;i++){?>
<th><?=data.categories[i]?></th>
<?}?>
</tr>
</thead>
<tbody>
<?for(j=0;j<data.data.length;j++){?>
<tr>
<td><?=data.data[j].name?></td>
<?for(k=0;k<data.data[j].data.length;k++){?>
<td><?=data.data[j].data[k]?></td>
<?}?>
</tr>
<?}?>
</tbody>
</table>
</script>
</body>
</html>
js:
function datastageStat(){
var success = function(datas) {
//datas = "{"categories":[' ', ' ', ' ', ' ', ' ',' app'],"data":[{"color":"#2EC8CA","data":[1268,0,0,0,0,0],"name":" "}, {"color":"#5BB0F0","data":[389,0,0,0,0,0],"name":" "}, {"color":"#D97A80","data":[76844,95181,487,10063,0,5027],"name":" "}]}"
datas = eval("(" + datas + ")");
$(".chart1_loding").hide();
// -----
var result = {'data' : datas};
var htm=template.render("dataTemplate", result);
$("#chart13").html(htm);
// -----
$('#chart12').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
exporting: {
enabled:false
},
xAxis: {
categories:datas.categories
},
yAxis: {
min: 0,
title: {
text: ''
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:datas.data
});
// -----
$('#chart11').highcharts({
title: {
text: '',
x: -20 //center
},
exporting: {
enabled:false
},
xAxis: {
categories:datas.categories
},
yAxis: {
title: {
text: ''
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#2EC8CA'
}]
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
series:datas.data
});
};
var error = function() {
};
$.baseAjax(getBaseURL() + "/client/Statistics!datastageStat.action", "POST",{}, success, error);
}Actionバックグラウンドデータ:
public void datastageStat() {
String categories = "[' ', ' ', ' ', ' ', ' ',' app']";
List<Integer> keyLists = new ArrayList<Integer>();
keyLists.add(11);
keyLists.add(13);
keyLists.add(14);
keyLists.add(17);
keyLists.add(6);
keyLists.add(7);//
List<ChartData<Long>> chartDataList = new ArrayList<ChartData<Long>>();
ChartData<Long> chartDataYY = new ChartData<Long>();//
ChartData<Long> chartDataTT = new ChartData<Long>();//
ChartData<Long> chartDataAA = new ChartData<Long>();//
chartDataYY.setName(" ");
chartDataTT.setName(" ");
chartDataAA.setName(" ");
chartDataYY.setColor("#2EC8CA");
chartDataTT.setColor("#5BB0F0");
chartDataAA.setColor("#D97A80");
List<Long> listYY = new ArrayList<Long>();//
List<Long> listTT = new ArrayList<Long>();//
List<Long> listAA = new ArrayList<Long>();//
//
if (ObjectUtil.isNotEmpty(keyLists)) {
for (Integer key : keyLists) {//
//
StatDatastage statDatastage = new StatDatastage();
Long organId = getOrganId();
if (organId != 1) {
statDatastage.setOrganId(organId);
}
statDatastage.setAssetType(String.valueOf(key));
statDatastage.setTimeRange("Y");
List<StatDatastage> dataListY = statDatastageService
.list(statDatastage);
if (ObjectUtil.isNotEmpty(dataListY)) {
long sum = 0;
for (StatDatastage sd : dataListY) {
sum += sd.getNum();
}
listYY.add(sum);//
}
statDatastage.setTimeRange("T");
List<StatDatastage> dataListT = statDatastageService
.list(statDatastage);
if (ObjectUtil.isNotEmpty(dataListT)) {
long sum = 0;
for (StatDatastage sd : dataListT) {
sum += sd.getNum();
}
listTT.add(sum);//
}
statDatastage.setTimeRange("A");
List<StatDatastage> dataListA = statDatastageService
.list(statDatastage);
if (ObjectUtil.isNotEmpty(dataListA)) {
long sum = 0;
for (StatDatastage sd : dataListA) {
sum += sd.getNum();
}
listAA.add(sum);//
}
}
}
chartDataYY.setData(listYY);
chartDataTT.setData(listTT);
chartDataAA.setData(listAA);
chartDataList.add(chartDataYY);
chartDataList.add(chartDataTT);
chartDataList.add(chartDataAA);
String jsonStr = "{\"categories\":" + categories + ",\"data\":"
+ chartDataList.toString() + "}";
writer(jsonStr);
}