来自 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);
 }
});
});
});

小服务程序：

@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 并以您的画布图表期望的格式写入数据。通常作为键值对。