将数据 ArrayList (EJB + Servlet + JSP(JSTL)) 显示到 JavaScript ArrayList答案

【问题标题】：Displaying data ArrayList (EJB + Servlet + JSP(JSTL)) to JavaScript ArrayList将数据 ArrayList (EJB + Servlet + JSP(JSTL)) 显示到 JavaScript ArrayList
【发布时间】：2015-09-20 05:43:01
【问题描述】：

在一个 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 ]

【问题讨论】：

你的实际输出是多少？？你可以做一些操作来让它工作。发表您的实际回应

标签： javascript java highcharts

【解决方案1】：

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> ]

【讨论】：

【解决方案2】：

你需要将你的数组列表写成 json 对象您需要做的就是使用一个好的 json 库，例如 Gson，它将您的数组列表转换为 JSON 对象使用 Ajax 请求从您的 servlet 中检索您的 json 对象以下代码（javascript代码）取自highchart demo

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

【讨论】：