ChartJS來自Java程序的折線圖或條形圖

我有一個MVC設計java程序，它返回來自兩個不同數據庫的給定表的年份計數，我從數據庫返回了三個列表（年數，OracleCounts和HiveCounts）。現在我已經到了，直到用戶從JSP頁面中選擇下拉選項後，將這三個列表從數據庫返回給servlet，但我不確定如何顯示圖表js圖形（線條或條形圖） jsp頁面。我想在X軸上顯示年（範圍從2000到2016），並在Y軸上計數，每個數據庫有兩個一個欄。ChartJS來自Java程序的折線圖或條形圖

JSP代碼如下

<table> 
    <tr> 
    <td> 
    <div class ="canvasdemochartjs"> 
      <select class="selectClass" name="CHARTJSDEMO" id="CHARTJSDEMO" > 
    <option value="none">-- Select a Table --</option> 
    <option value="XXCSS_O.XXCSS_IBAE_SxxxT">XXCSS_O.XXCSS_</option> 
    </select> 

    </div> 
    <canvas id="canvasdemo" height="300" width="300"></canvas> 
    <div class="" id="result1" style="display: none" ></div> 
    </td> 
    </tr> 
    </table>

JQuery的：

$(document).ready(function() { 
$('#CHARTJSDEMO').change(function() { 
    var CHARTJSDEMORUNOPTION = $('#CHARTJSDEMO').val(); 
    var chartData = { 
      labels: [], // currently empty will contain all the labels for the data points 
      datasets: [ 
      { 
       label: "Oracle", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: [] // currently empty will contain all the data points for bills 
      }, 
      { 
       label: "Hive", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [] // currently empty will contain all the data points for bills 
      } 
      ] 
     }; 

$.ajax({ 
type:'POST',  
url: "DemoChartJS", 
data: {CHARTJSDEMORUNOPTION: CHARTJSDEMORUNOPTION}, 
cache: false, 
success: function(result) { 
    alert("inside jquery"+result); 
    $.each(result , function (index, value){ 
     console.log(value); 
     alert("inside first list: "+value) 

var ctx = document.getElementById("canvasdemo").getContext("2d"); 
    ctx.canvas.width = 1000; 
    ctx.canvas.height = 800; 

    var myChart = new Chart(ctx).Bar(chartData); 
} 
}); 
}); 
});

的Servlet：

@SuppressWarnings("rawtypes") 
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    // TODO Auto-generated method stub 

    int num = Integer.parseInt(request.getParameter("CHARTJSDEMORUNOPTION")); 
    System.out.println("option in dopost: "+num); 
    response.setContentType("text/html"); 
    List CompositeList =new ArrayList(); 
    ChartJSDemo_Implementation ChartJSDemo =new ChartJSDemo_Implementation(); 

    CompositeList=ChartJSDemo.GetCountsData("XXCSS_O.XXCSS_IBAE_SxxT", "xxxxx", "xxxxx", "xxxxxx$"); 



}

我提到here和here但不明白如何從servlet的數據傳遞到Jquery

幾個瀏覽後，我試圖從servlet來的Jquery它打印預期，呈現出三個列表打印數據，但我不能重複它，並將它推到圖表數據

來源

2016-12-30 Vinod

@Vinod你的servlet代碼是錯誤的。你爲什麼要在doPost（）中調用doGet（）方法？

而返回的內容類型應該是application/json而不是text/html。

定義PrintWriter &以您的畫布圖預期的格式編寫數據。通常作爲關鍵值對。

來源

2016-12-30 10:23:53 Venkat

我將更正servlet代碼和內容類型，但是您可以指導如何在關鍵值對中編寫數據並進行解析，因爲我有這樣的數據...對於給定的表格，每年從兩個不同的數據庫計數。所以在給定的一年裏會有兩個值。 – Vinod

我編輯了一下Jquery函數，看看這個值是否是從servlet解析出來的，我得到了第一個警報的彈出窗口，但沒有看到第二個警報的彈出窗口。 – Vinod

ChartJS來自Java程序的折線圖或條形圖

回答

相關問題