我正在尝试通过 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 所示的相同结果。 期待您的解决方案。提前致谢。
最佳答案
要实现该结果，您需要在开始时创建两个系列:
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
});
关于javascript - 无法在运行时使用 json 数据填充 Highchart，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35332817/