将数据ArrayList（EJB&x2B；Servlet&x2B；JSP（JSTL））显示到JavaScript ArrayList
在一个servlet中，我在JSP页面上发送ArrayList并尝试将ArrayList插入JavaScript（Highcharts），但我不知道如何做 下面的代码是从JSP页面上的servlet获取ArrayList的代码将数据ArrayList（EJB&x2B；Servlet&x2B；JSP（JSTL））显示到JavaScript ArrayList,javascript,java,highcharts,Javascript,Java,Highcharts,在一个servlet中，我在JSP页面上发送ArrayList并尝试将ArrayList插入JavaScript（Highcharts），但我不知道如何做 下面的代码是从JSP页面上的servlet获取ArrayList的代码 <c:forEach items="${elecMeterRecordList}" var="el" > ${el.electricity_meter_record_unit} </c:forEach> 您需要将数组列表写为json对象
<c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit}
</c:forEach>
您需要将数组列表写为json对象 您所需要做的就是使用一个好的json库，例如将数组列表转换为json对象的Gson 使用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'
}]
});
});
});
$（函数（）{
//获取CSV并创建图表
$.getJSON（'http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?，函数（csv）{
$（“#容器”）。高图({
数据：{
csv:csv
},
标题：{
文字：“每日访问www.highcharts.com”
},
副标题:{
文本：“来源：谷歌分析”
},
xAxis：{
间隔时间：7*24*3600*1000，//一周
宽度：0，
网格线宽度：1，
标签：{
对齐：“左”，
x:3，
y:-3
}
},
yAxis:[{//左y轴
标题：{
文本：空
},
标签：{
对齐：“左”，
x:3，
y:16，
格式：“{value:，0f}”
},
showFirstLabel:错误
}，{//右y轴
链接到：0，
网格线宽：0，
相反：是的，
标题：{
文本：空
},
标签：{
对齐：“右”，
x:-3，
y:16，
格式：“{value:，0f}”
},
showFirstLabel:错误
}],
图例：{
对齐：“左”，
垂直排列：“顶部”，
y:20，
浮动：是的，
边框宽度：0
},
工具提示：{
分享：是的，
十字准星：对
},
打印选项：{
系列：{
光标：“指针”，
要点：{
活动：{
点击：功能（e）{
hs.htmlExpand（空{
页面来源：{
x:e.pageX | e.clientX，
y:e.pageY | e.clientY
},
headingText:this.series.name，
maincontentText:Highcharts.dateFormat（“%A，%b%e，%Y'，this.x）+'：
+
这个.y+“访问”，
宽度：200
});
}
}
},
标记：{
线宽：1
}
}
},
系列：[{
名称：'所有访问'，
线宽：4，
标记：{
半径：4
}
}, {
名称：'新访客'
}]
});
});
});
data : [ <c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit},
</c:forEach> ]
数据：[
${电能表\记录\单位}，
]
$(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'
}]
});
});
});
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 : [ <c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit},
</c:forEach> ]