向JavaScript发送数据ArrayList（EJB + Servlet + JSP（JSTL））ArrayList

在一个servlet中，我在JSP页面上发送ArrayList并尝试将ArrayList插入JavaScript（Highcharts），但我不知道该怎么做它。向JavaScript发送数据ArrayList（EJB + Servlet + JSP（JSTL））ArrayList

下面的代码是从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 ]

来源

2015-09-20 Kriang

你的实际产量是多少？你可以做一些操作来使它工作。张贴您的实际回应 –

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 ]

采取10

只需使用从JSP上的servlet获取的ArrayList替换其中的代码，如下所示。因为这个代码“$ {el.electricity_meter_record_unit}”已经是ArrayList。更新代码后，您可能会看到一些错误或红色警告，但无论如何它都可以运行。希望这可能有所帮助。

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

来源

2015-09-21 10:09:12

你需要写您的数组列表作为JSON对象所有你需要做的是使用例如GSON一个很好的JSON库，转换你的数组列表为JSON对象使用Ajax请求来检索您的JSON对象从你的servlet 下面的代码（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

来源

2015-09-20 05:58:24

向JavaScript发送数据ArrayList（EJB + Servlet + JSP（JSTL））ArrayList

回答

相关问题