將ArrayList傳遞給JQuery Flot

英語不是我的母語，請耐心等待。

我在[見標籤]初學者，有一個Web應用程序，它收集的日期和序列，使一個SQL查詢和（從度量和測量的日期值）返回一些數據到行動doDrawFlot，在這個動作中，這個數據被合成爲填充一個flot圖。

我需要一個ArrayList <（字符串或整數）>並將它傳遞給Javascript來填充海軍報曲線圖。

在這一刻我有我的行動：

public InputStream inputStream; 

    public String doDrawFlot() { 

     StringBuilder response = new StringBuilder(); 

     response.append("1_20"); 
     response.append("2_50"); 
     response.append("3_10"); 

     byte[] bArray = response.toString().getBytes(); 
     inputStream = new ByteArrayInputStream(bArray); 

     return SUCCESS; 
    }

Struts2的XML

<action name="GetProfile" class="com.raspberry.struts.action.PerfilCargaAction" 
     method="doDrawFlot"> 
    <interceptor-ref name="SessionValidationStack" /> 
    <result type="stream"> 
     <param name="contentType">text/html</param> 
     <param name="inputName">inputStream</param> 
    </result>    
</action>

和JavaScript文件：

$(document).ready(function() { 
    //Re-load records when user click 'load records' button. 
    $('#LoadRecordsButton').click(function (e) { 
     $.ajax({ 
     type: 'POST', 
     url: 'GetProfile?fechaPerfil='+$('#startDate').datepicker({ dateFormat: 'yyyy-mm' }).val()+'&meter=' + $('#meterList option:selected').text(), 

     success: function (response) { 
console.log(response); //At request of @Raidri 
      var servletResponse = response; 

      var str = []; 
      var num = []; 
      var d1 = []; 

      for (var i = 0, len = servletResponse.length; i < len; i++) { 

       num.push(parseInt(servletResponse[i].split("_")[0])), 
       str.push(parseInt(servletResponse[i].split("_")[1])); 
       d1[i] = [num[i],str[i]];  
      } 
console.log(d1); //At request of @Raidri 
      $.plot($("#placeholder"), [d1]); 
     } 
     });  
     }); 
    $.plot($("#flotDiv"), [[]]);     
});

正如你所看到的數據是不在ArrayList中，這是因爲我正在使用inputstream傳遞數據客戶端。

要傳遞數據就像數組和格式正確在flot是絕對必要使用Json（或Gson）？

或者我目前的版本可以完成這項工作嗎？

任何想法（代碼修復，POJO，簡單教程爲noob）或recomendations？

我正在使用struts2和mykong tutorial沒有幫助我。

更新：

在@Raidri的請求兩個控制檯日誌的輸出：

的console.log（響應）：1_202_503_10

的console.log（D1）：[1,NaN][NaN,NaN][2,NaN][0,NaN][2, NaN][NaN,NaN][5,NaN][0,NaN][3,NaN][NaN,NaN][1,NaN][NaN,0]

流發送一個單獨的字符串，我需要一個數組，因爲這些措施的長度可以改變（即，「102」或「0」）

來源

2016-02-25 Elber CM

請插入'的console.log （響應）'在成功回調函數和'的console.log（D1）的開始'前'$ .plot（）'調用，然後將結果添加到您的答案。 – Raidri

@Raidri感謝您的評論，問題更新。 –

正如你所看到的你的d1數組無效。和原來的數據串所需要的數據點之間有些隔膜，例如

response.append("1_20;"); 
... 

// response = "1_20;2_50;3_10"

然後我們可以使用map()功能來構建我們的數據數組是這樣的：

d1 = response.split(';').map(function (datapoint) { 
    return datapoint.split('_'); 
}); 

// d1 = [["1", "20"], ["2", "50"], ["3", "10"]]

來源

2016-02-25 20:19:43 Raidri

你的答案被最有用，但不會處理數組。儘管如此，我仍然能夠正確地繪製我的數據，並在答案中找到一些「解決方法」。如果沒有其他人回答數組的方法，我會接受你的答案。再次感謝。 –

謝謝Raidri。你的回答幫助我設法擁有兩個「Yaxis」，並正確顯示數據與時間的關係。 –

將ArrayList傳遞給JQuery Flot

回答

相關問題