将数据ArrayList(EJB+Servlet+JSP(JSTL））显示为JavaScript ArrayList

Displaying data ArrayList (EJB + Servlet + JSP(JSTL)) to JavaScript ArrayList

本文关键字：ArrayList 显示 JavaScript EJB+Servlet+JSP 数据 JSTL      更新时间：2023-09-26

在servlet中，我在JSP页面上发送ArrayList，并尝试将ArrayList插入JavaScript(Highcharts(中，但我不知道如何做到这一点。

下面的代码是从JSP页面上的servlet获取ArrayList的代码。

<c:forEach items="${elecMeterRecordList}" var="el" >
    ${el.electricity_meter_record_unit}
</c:forEach>

下面的代码是Javascript(highcharts(，我想显示从servlet发送的ArrayList。

<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代码(取自高图演示

$(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

相关文章：