Question

我试图通过servlet发送数据来填充高图。我的servlet就像：

package com.sandeep.visual.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.visual.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.setComputerMark(75);
        s1.setMathematicsMark(26);
        listOfStudent.add(s1);

        Student s2 = new Student();
        s2.setName("Bapi");
        s2.setComputerMark(60);
        s2.setMathematicsMark(63);
        listOfStudent.add(s2);

        Student s3 = new Student();
        s3.setName("Raja");
        s3.setComputerMark(40);
        s3.setMathematicsMark(45);
        listOfStudent.add(s3);

        Student s4 = new Student();
        s4.setName("Sonu");
        s4.setMathematicsMark(29);
        s4.setComputerMark(78);
        listOfStudent.add(s4);

        return listOfStudent;
    }
}

我能够在我的html页面中获得所需的json：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Dynamic HighChart</title>
<script type="text/javascript" src="./js/jquery.min_1.8.2.js"></script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'StudentJsonDataServlet',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);
            // Populate series
            var nameArr = new Array();
            var processed_json = new Array();
            for (i = 0; i < data.length; i++) {
                nameArr.push([data[i].name]);
                processed_json.push([parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)]);
            }
            console.log("name array : " + nameArr);
            console.log("FinalArray : " + processed_json);
            // draw chart
            $('#container').highcharts({
                chart: {
                    type: "line"
                },
                title: {
                    text: "Marks obtained"
                },
                xAxis: {
                    categories: [nameArr]
                },
                yAxis: {
                    title: {
                        text: "Marks obtained"
                    }
                },
                series: [{
                    name: nameArr,
                    data: processed_json
                }]
            });
        }
    });
});
</script>
</body>
</html>

现在最好的事情是我能够填充HighChart，但它并不像我想要的那样出现。我使用谷歌图表尝试了相同的上述示例，我得到这样的东西：

我希望得到的是我想要的结果。

但是使用高图我会得到这样的东西：

如何通过highChart实现图1中所示的相同结果。期待您的解决方案。提前谢谢。

Answer 1

Here is working fiddle

根据JSON共享

更新，下面是完整的代码：

var seriesData=[];
var data =[{"name":"Sandeep","mathematicsMark":26,"computerMark":75},   {"name":"Bapi","mathematicsMark":63,"computerMark":60},{"name":"Raja","mathematicsMark":45,"computerMark":40},{"name":"Sonu","mathematicsMark":29,"computerMark":78}] ;
$.each (data, function(i){ 
 seriesData.push({name:data[i].name,data:    [parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)]});

})  ;

在图表中使用此seriesData

而不是单独的名称和数据数组

            [{
                name: nameArr,
                data: processed_json
            }]

执行如下：

           [{
                name: data[i].name,
                data: [parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)] // or your processed_json  
            }]

Answer 2

要获得该结果，您需要在开头创建两个系列：

var series = [{
  name: "Mathematics mark",
  data: []
}, {
  name: "Computer mark",
  data: []
}];

现在，在这些系列中添加点（标记）：

$.each(data, function(i, point) {
  series[0].data.push([
    point.name,
    parseInt(point.mathematicsMark)
  ]);
  series[1].data.push([
    point.name,
    parseInt(point.computerMark)
  ]);
});

现在，将xAxis.type设置为category，这样点的名称将用作xAxis标签：

$('#container').highcharts({
  xAxis: {
    type: 'category'
  },
  series: series
});

工作演示：https://jsfiddle.net/sg9rghyg/

无法使用json数据在运行时填充Highchart

2 个答案: