JSON数据未显示图表

Question

实际上我想使用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>

restwebcontroller.java

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

    }

Answer 1

因此，我认为您的代码存在两个问题。 首先，我创建了一个与您发布的数据屏幕快照类似的对象：

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

这给了我dataPoints对象以CanvasJS期望的正确格式：

[{"x":"10-15","y":220.763},{"x":"15-20","y":128.554},{"x":"20-25","y":150}]

下一个问题是CanvasJS似乎期望x和y值为Number 。 要执行您想要的操作，我认为您需要使用label属性。 所以我将循环代码更改为：

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

然后它似乎可以正确渲染。

工作示例： https : //jsfiddle.net/nzr5ds12/10/

Answer 2

x值可以是数字或dateTime值，不能是字符串。 正如@androidnoobie建议的那样，您可以将rangeLab视为label 。

我也建议您在AJAX请求之外一次创建图表，并只在AJAX中更新dataPoints。 否则，它将在每个AJAX请求上创建新图表。 请参考JSON Data API和AJAX上的图表教程。

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

JSON数据未显示图表

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-06-05 05:26:02

解决方案2
0 2018-06-06 04:55:58

JSON数据未显示图表

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-06-05 05:26:02

解决方案2 0 2018-06-06 04:55:58

解决方案1
1 已采纳 2018-06-05 05:26:02

解决方案2
0 2018-06-06 04:55:58