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

【问题标题】：Unable to populate Highchart at runtime using json data无法在运行时使用 json 数据填充 Highchart
【发布时间】：2016-02-11 07:05:19
【问题描述】：

我正在尝试通过 servlet 发送数据来填充 highchart。我的 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 我得到的是这样的：

如何通过 highChart 获得与图 1 相同的结果。期待您的解决方案。提前致谢。

【问题讨论】：

标签： javascript json servlets highcharts

【解决方案1】：

要达到这个效果，您需要在开始时创建两个系列：

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/

【讨论】：

感谢帕维尔的回复。这就是我打算做的:)

【解决方案2】：

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)]});

})  ;

在图表中使用这个系列数据

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

            [{
                name: nameArr,
                data: processed_json
            }]

如下：

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

【讨论】：

感谢 nishith 的回复。我尝试了您的建议，现在我得到了四行，或者它根据学生姓名而不是两行创建单独的系列。我想在这里实现的是我想设置两个系列，它们是数学分数和计算机分数。我想在 Y 轴上显示学生的姓名，如第一张图片所示。
你能分享你的 json 数据，以便我为你创建一个工作小提琴
嗨尼西斯。这是我的 json 数据：[{"name":"Sandeep","mathematicsMark":26,"computerMark":75},{"name":"Bapi","mathematicsMark":63,"computerMark":60} ,{"name":"Raja","mathematicsMark":45,"computerMark":40},{"name":"Sonu","mathematicsMark":29,"computerMark":78}]
@Roy 检查我的答案中的更新，小提琴正在工作
感谢 Nishith 的帮助。这件事我已经能够实现。我唯一无法实现的是在运行时设置 x 轴列名