[英]Displaying data ArrayList (EJB + Servlet + JSP(JSTL)) to JavaScript ArrayList
在 servlet 中,我在 JSP 頁面上發送 ArrayList 並嘗試將 ArrayList 插入 JavaScript(Highcharts),但我不知道該怎么做。
下面的這段代碼是從 JSP 頁面上的 servlet 中獲取 ArrayList 的代碼。
<c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit}
</c:forEach>
下面的代碼是我想顯示從 servlet 發送的 ArrayList 的 Javascript(highcharts)。
<script type="text/javascript">
$(function() {
$('#container').highcharts(
{
chart : {
type : 'line'
},
title : {
text : 'Monthly Average Temperature'
},
subtitle : {
text : 'Source: WorldClimate.com'
},
xAxis : {
categories : [ 'Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov',
'Dec' ]
},
yAxis : {
title : {
text : 'Temperature (°C)'
}
},
plotOptions : {
line : {
dataLabels : {
enabled : true
},
enableMouseTracking : false
}
},
series : [
{
name : 'Water',
data : [ 7.02, 6.91, 9.53,
14.54, 18.41, 21.54,
25.21, 26.54, 23.35,
18.23, 13.91, 9.26 ]
},
{
name : 'Electricity',
data : [ 3.49, 4.25, 5.67,
8.35, 11.59, 15.26,
17.20, 16.63, 14.32,
10.35, 6.56, 4.08 ]
} ]
});
});
</script>
這里的代碼,我想用ArrayList替換這些數據。
data : [ 3.49, 4.25, 5.67,
8.35, 11.59, 15.26,
17.20, 16.63, 14.32,
10.35, 6.56, 4.08 ]
data : [ 3.49, 4.25, 5.67,
8.35, 11.59, 15.26,
17.20, 16.63, 14.32,
10.35, 6.56, 4.08 ]
只需用您從 JSP 上的 servlet 獲取的 ArrayList 替換里面的代碼,如下所示。 因為這段代碼“${el.electricity_meter_record_unit}”已經是ArrayList了。 更新代碼后,您可能會看到一些錯誤或紅色警告,但它仍然可以運行。 希望這可能會有所幫助。
data : [ <c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit},
</c:forEach> ]
您需要將數組列表編寫為 json 對象所有您需要做的就是使用一個好的 json 庫,例如 Gson 將您的數組列表轉換為 JSON 對象使用 Ajax 請求從您的 servlet 檢索您的 json 對象以下代碼(javascript 代碼) 取自 highchart 演示
$(function () {
// Get the CSV and create the chart
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
HTH
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.