Javascript 未从JSON数据显示图表_Javascript_Java_Jquery_Ajax_Datatable

Javascript 未从JSON数据显示图表

javascript java jquery ajax

Javascript 未从JSON数据显示图表,javascript,java,jquery,ajax,datatable,Javascript,Java,Jquery,Ajax,Datatable,实际上，我想用JSON数据显示图表。当我输入url时，JSON数据会出现，但它不会以图表形式显示。我在控制台中没有收到任何错误 try.jsp <!DOCTYPE HTML> <html> <head> <title></title> <body> <div id="chartContainer" style="height: 300px; width: 100%;"> </div>

实际上，我想用JSON数据显示图表。当我输入url时，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>


var数据点=[]；
$.getJSON（“http://localhost:8080/FRA-UI/api/report19graph/all“，函数（数据）{
$。每个（数据、函数（键、值）{
push（{x:value[0]，y:value[1]}）；
});
var chart=new CanvasJS.chart（“chartContainer”{
标题：{
文本：“使用外部JSON的数据点呈现图表”
},
数据：[{
键入：“行”，
数据点：数据点，
}]
});
chart.render（）；
});

restwebcontroller.java

@GetMapping(value="/report19graph/all")
    @ResponseBody
    public List<Report19Graph> getReport19GraphData(){
        List<Report19Graph> list=reportService.getReport19GraphData();
        return list;

    }

@GetMapping（value=“/report19graph/all”）
@应答器
公共列表getReport19GraphData（）{
List List=reportService.getReport19GraphData（）；
退货清单；
}

因此，我认为您的代码存在一些问题。首先，我创建了一个类似于您发布的数据截图的对象：

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

。要执行所需操作，我认为需要使用

标签

属性。因此，我将循环代码更改为：

$.each(data, function(key, value) {
  dataPoints.push({
    label: value[Object.keys(value)[0]],
    y: value[Object.keys(value)[1]]
  });
});

然后，它似乎呈现正确

工作示例：

可以是数字或日期时间值，不能是字符串。如您所建议的，可以考虑Rangelab. as

另外，我建议您在AJAX请求之外创建一次图表，并在AJAX中更新数据点。否则，它会根据每个AJAX请求创建新的图表。请参阅

在您的代码中添加#新的CanvasJS.Chart（#chartContainer“，{并将您的自定义jquery代码放在canvajs scriptNo bro下面。它不起作用了，我试过了，正如您所说，控制台中显示的

dataPoints

（即

console.log（dataPoints）

？此外，我链接到的JSFIDLE中的示例也起作用。除了AJAX调用之外，您的代码和我的JSFIDLE之间有什么不同吗？当我这样做时，数据被推送到dataPoints数组中。但图表仍然不显示。

var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
    title:{
        text:"Rendering Chart with dataPoints from External JSON"
    },
    data: [{
        type: "line",
        dataPoints : 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]});
    });
    chart.render();
});