0

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

1 に答える 1

0

コードで試みたように、JSP 変数から JavaScript 配列を直接作成することはできません。各要素を個別に設定する (または展開リストとして宣言する) 必要があります。

JavaScript コードは配列を使用していますが、次に 2 つの (スカラー/ノーマル) 変数 (カテゴリ、値) を作成し、それらを変数に追加しています。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:"});
}

編集、次のようにコーディングすると、2行目を理解しやすくなる場合があります。

var sessionId = [];
<c:forEach items="${arrayList}" var="id">
    sessionId.push("${id}"); // add them one at a time, assuming string values
</c:forEach>
于 2012-11-02T04:20:02.073 に答える