javascript - 来自 Java 程序的 ChartJS 折线图或条形图

Question

我有一个 MVC 设计 java 程序，它从两个不同的数据库返回给定表的逐年计数，我从数据库返回了三个列表(Years、OracleCounts 和 HiveCounts)。现在，当用户从 JSP 页面中选择下拉选项后，我将这三个列表从数据库返回到 servlet，但是我不确定如何在 jsp 页面中显示图表 js 图形(折线图或条形图)。我想在 X 轴上显示年份(范围从 2000 年到 2016 年)，并在 Y 轴上显示计数，每个数据库各有两个条。

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，它按预期打印，显示三个列表，但是我无法迭代它并将其推送到图表数据

Answer 1

@Vinod 你的 Servlet 代码是错误的。为什么在 doPost() 中调用 doGet() 方法？

返回的内容类型应该是application/json而不是text/html。

定义一个 PrintWriter 并以 Canvas 图表所需的格式写入数据。通常作为键值对。