动态数据的遍历数组，用于javascript中的google可视化api

Question

我正在使用 Google Visualization API 在 JSP 页面上显示图表。使用会话变量，我能够获取 Google Visualization API 中包含的方法的数据集。我也能够加载数据，但是它只检索数组的第一个元素。如何放置数组的所有值？代码如下：

在 AnalyzeUserClient.jsp 中：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript"> 
var sessionId = <%= (ArrayList<String>)request.getSession().getAttribute("arrayList") %>;

for(var i=0;i<sessionId.length;i++){
if(i%2==0){
    var category = sessionId[i];
}
else{
    var value = sessionId[i];
}
}

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Category', 'Value'],
      [category,value],
    ]);

    // Create and draw the visualization.
    new google.visualization.PieChart(document.getElementById('visualization')).
        draw(data, {title:"Percentage of Category for User:"});
  }

  google.setOnLoadCallback(drawVisualization);

//HTML Code:
<div id="visualization" style="width: 600px; height: 400px;"></div>

Answer 1

您不能直接从 JSP 变量创建 JavaScript 数组，就像您在代码中尝试做的那样。您必须分别填充每个元素（或将其声明为分解列表）。

您的 JavaScript 代码正在获取一个数组，但您随后创建了两个（标量/普通）变量（类别、值），您将它们添加到 data 变量中 - 这些不是列表/数组，因此您将获得仅来自数组的最后 2 个元素。

我假设你原来的 ArrayList 包含“对”的值，所以我会尝试这样的事情（未检查，所以可能有错误）：

<c:set var="arrayList"><%= (ArrayList<String>)request.getSession().getAttribute("arrayList") %></c:set>
var sessionId = ["${fn:join(arrayList, '","')}"]; // will create a JS list
var categories = [], values = [], tuples = [];

for(var i=0;i<sessionId.length;i++){
    if(i%2==0){
        categories.push(sessionId[i]);
    }
    else{
        values.push(sessionId[i]);
    }
}

// following loop assumes categories and values are the same length
for (var i=0;i<categories.length;i++){
    tuples.push([ categories[i], values[i] ]); // create a list of lists (tuples)
}

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Category', 'Value'],
      tuples,
    ]);

    // Create and draw the visualization.
    new google.visualization.PieChart(document.getElementById('visualization')).
    draw(data, {title:"Percentage of Category for User:"});
}

编辑一下，第二行写成这样可能更容易理解：

var sessionId = [];
<c:forEach items="${arrayList}" var="id">
    sessionId.push("${id}"); // add them one at a time, assuming string values
</c:forEach>