Реализация диаграммы JS Библиотека с Java, Json & Ajax - PullRequest
Новая
       44

Реализация диаграммы JS Библиотека с Java, Json & Ajax

0 голосов
/ 02 мая 2020

Я создаю Sapmle Radar Graph, используя Chart JS Library, Java, Json & Ajax. Ниже приведен код. Но проблема в том, что я ничего не получаю в качестве вывода. Можете ли вы просмотреть этот код и исправить его?

Вы можете скачать полный проект через GitHub https://github.com/praveenverma/Dashboard

Структура проекта выглядит следующим образом -

enter image description here

диаграмма js -демонстрация. html

<html>
 <head>
  <title>Chart JS Library Demo</title>
  <style>
  </style>
 </head>
 <body>
  <canvas id="canvas" height="500" width="500"></canvas>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="./js/Chart.min.js"></script>
  <script type="text/javascript" src="./js/ts-chart-script.js"></script>
 </body>
</html>

ц- скрипт-скрипт. js

var TUTORIAL_SAVVY ={     
  /*Makes the AJAX calll (synchronous) to load a Student Data*/
  loadStudentData : function(){
   var formattedstudentListArray =[];

    $.ajax({
      async: false,
      url: "StudentJsonDataServlet",
      dataType:"json",
      success: function(studentJsonData) {
    console.log(studentJsonData);
     $.each(studentJsonData,function(index,aStudent){
      formattedstudentListArray.push([aStudent.mathematicsMark,aStudent.computerMark]);
     });
      }
    });
   return formattedstudentListArray;
  },
  /*Crate the custom Object with the data*/
  createChartData : function(jsonData){
  console.log(jsonData);
   return {
    labels : ["Mathematics", "Computers"],
    datasets : [
     {
      fillColor : "rgba(255,0,0,0.3)",
      strokeColor : "rgba(0,255,0,1)",
      pointColor : "rgba(0,0,255,1)",
      pointStrokeColor : "rgba(0,0,255,1)",
      /*As Ajax response data is a multidimensional array, we have 'student' data in 0th position*/
      data : jsonData[0]
     }
    ]
   };
  },
  /*Renders the Chart on a canvas and returns the reference to chart*/
  renderStudenrRadarChart:function(radarChartData){
   var context2D = document.getElementById("canvas").getContext("2d"),
    myRadar = new Chart(context2D).Radar(radarChartData,{
               scaleShowLabels : false,
               pointLabelFontSize : 10
        });
    return myRadar;
  },
  /*Initalization Student render chart*/
  initRadarChart : function(){ 
   var studentData = TUTORIAL_SAVVY.loadStudentData();
    chartData = TUTORIAL_SAVVY.createChartData(studentData);
    radarChartObj = TUTORIAL_SAVVY.renderStudenrRadarChart(chartData);
  }
};
$(document).ready(function(){
 TUTORIAL_SAVVY.initRadarChart();
});

StudentJsonDataServlet. java

package com.sandeep.chartjs.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.sandeep.chartjs.data.Student;

@WebServlet("/StudentJsonDataServlet")
public class StudentJsonDataServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
 public StudentJsonDataServlet() {
  super();
 }

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  List<Student> listOfStudent = getStudentData();
  Gson gson = new Gson();
  String jsonString = gson.toJson(listOfStudent);
  response.setContentType("application/json");
  response.getWriter().write(jsonString);
 }

 private List<Student> getStudentData() {
  List<Student> listOfStudent = new ArrayList<Student>();
  Student s1 = new Student();
  s1.setName("Sandeep");
  s1.setMathematicsMark(26);
  s1.setComputerMark(75);
  listOfStudent.add(s1);

  Student s2 = new Student();
  s2.setName("Sandeep");
  s2.setMathematicsMark(26);
  s2.setComputerMark(75);
  listOfStudent.add(s2);

  return listOfStudent;
 }
}

Student. java 

package com.sandeep.chartjs.data;

public class Student {
    private String name;
    private int mathematicsMark;
    private int computerMark;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getMathematicsMark() {
        return mathematicsMark;
    }
    public void setMathematicsMark(int mathematicsMark) {
        this.mathematicsMark = mathematicsMark;
    }
    public int getComputerMark() {
        return computerMark;
    }
    public void setComputerMark(int computerMark) {
        this.computerMark = computerMark;
    }
}
...