将数据传递到javascript图表

时间:2017-03-22 05:08:40

标签: javascript jsp

我有一个从服务器传递到jsp的列表,就像这样,

 <c:forEach items="${query}" var="u"> <p>${u.date} ${u.count}</p> </c:forEach>

我在javascript中使用一个数组来保存查询对象,然后将该数组传递给datapoints,如下所示,

       <script type="text/javascript">
  window.onload = function () {
var arr = new Array();
<c:forEach items="${query}" var="u" varStatus="status"> 
var cnt= '${u.count}';
if(cnt=="")
    arr.push( '{' + 'x' +  ':' + '${u.date}'+ ',' + 'y' + ':' +'0' + '}' + ',');
else
   arr.push( '{' + 'x' +  ':' + '${u.date}'+ ',' + 'y' + ':' +'${u.count}' + '}' + ',');
</c:forEach> 

var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
    alert(' '+arr[i]);

}

       var chart = new CanvasJS.Chart("chartContainer",
    {

     title:{
      text: "Earthquakes - per month"
      },
       data: [
      {
        type: "line",

        dataPoints: [
      arr
        ]
      }
      ]
    });

    chart.render();
  }

</script>

但图表未显示传递给arr的数据

1 个答案:

答案 0 :(得分:0)

您需要在任何可用范围上设置属性以使对象可通过表达式语言访问 - 然后在页面中的任何位置使用EL构造。 请试试这个:

 <%
     List  query = new ArrayList();
     HashMap sampleObj = new HashMap();
     sampleObj.put("date", "2015");
     sampleObj.put("count", 145);

     query.add(sampleObj);
     query.add(sampleObj);
     query.add(sampleObj);

     pageContext.setAttribute("query",query);

     System.out.println("Len : "+query.size());

     %>

...
        <script>

        var chartObj = {
               title: {
                  text: "Earthquakes - per month"
                 },
               data: [
                      {
                       type: "line",
                       dataPoints: [

                             <c:forEach items="${query}" var="u" varStatus="statusVar">
                             <c:if test="${ statusVar.index > 0 }">
                                <c:out value="," />
                             </c:if>
                             <c:out value="{ x : ${u.date}, y:  ${u.count} }" />
                             </c:forEach>

                              ]
                     }
                 ]
             };

        alert(JSON.stringify(obj));

        var chart = new CanvasJS.Chart("chartContainer", chartObj);
        chart.render();

        </script>