向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

回答

相關問題