实际上我想使用 JSON 数据显示图表。当我输入网址时，JSON 数据即将到来，但它没有以图表形式显示。我在控制台中没有收到任何错误。
try.jsp
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<script type="text/javascript">
var dataPoints = [];
$.getJSON("http://localhost:8080/FRA-UI/api/report19graph/all", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: value[1]});
});
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Rendering Chart with dataPoints from External JSON"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
chart.render();
});
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
</body>
</html>
restwebcontroller.java
@GetMapping(value="/report19graph/all")
@ResponseBody
public List<Report19Graph> getReport19GraphData(){
List<Report19Graph> list=reportService.getReport19GraphData();
return list;
}
最佳答案
所以我认为您的代码存在一些问题。首先，我创建了一个与您发布的数据屏幕截图类似的对象:
let data = [{
"rangeLab": "10-15",
"rangeVal": 220.763
}, {
"rangeLab": "15-20",
"rangeVal": 128.554
}, {
"rangeLab": "20-25",
"rangeVal": 150
}];
为了获得所需的格式，我循环遍历数组中的每个对象，并指定“x”为第一个对象的值，“y”为第二个对象的值:
$.each(data, function(key, value) {
dataPoints.push({
x: value[Object.keys(value)[0]],
y: value[Object.keys(value)[1]]
});
});
这给了我 CanvasJS 所期望的正确格式的 dataPoints 对象:
[{"x":"10-15","y":220.763},{"x":"15-20","y":128.554},{"x":"20-25","y":150}]
下一个问题是 CanvasJS 似乎需要一个 Number 作为 x 和 y 的值。为了做你想做的事，我认为你需要使用 label 属性。所以我将循环代码更改为:
$.each(data, function(key, value) {
dataPoints.push({
label: value[Object.keys(value)[0]],
y: value[Object.keys(value)[1]]
});
});
然后它似乎正确渲染了。
关于javascript - 图表未显示 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50692364/