JSON数据未显示图表

Question

Actually i want to show chart by using JSON data.When i entered the url the JSON data is coming but it is not showing in chart form.I am not getting any error in console. 实际上我想使用JSON数据显示图表。当我输入url时，JSON数据即将到来，但它没有以图表形式显示。控制台中没有出现任何错误。

try.jsp 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 restwebcontroller.java

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

    }

Answer 1

So I think there are a couple of issues with your code. 因此，我认为您的代码存在两个问题。 First, I created an object similar to the screenshot you posted of your data: 首先，我创建了一个与您发布的数据屏幕快照类似的对象：

let data = [{
  "rangeLab": "10-15",
  "rangeVal": 220.763
}, {
  "rangeLab": "15-20",
  "rangeVal": 128.554
}, {
  "rangeLab": "20-25",
  "rangeVal": 150
}];

To get this in the format you want, I looped over each object in the array, and specified "x" to be the value of the first object and "y" to be the value of the second object: 为了获得所需的格式，我遍历了数组中的每个对象，并将“ x”指定为第一个对象的值，将“ y”指定为第二个对象的值：

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

That gave me the dataPoints object in the correct format expected by CanvasJS: 这给了我dataPoints对象以CanvasJS期望的正确格式：

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

The next issue is that CanvasJS seems to expect a Number for values of x and y . 下一个问题是CanvasJS似乎期望x和y值为Number 。 To do what you want, I think you need to use the label property. 要执行您想要的操作，我认为您需要使用label属性。 So I changed the loop code to: 所以我将循环代码更改为：

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

And then it seemed to render correctly. 然后它似乎可以正确渲染。

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

Answer 2

x-value can be numeric or a dateTime value and can't be string. x值可以是数字或dateTime值，不能是字符串。 As @androidnoobie suggested you can consider rangeLab as label . 正如@androidnoobie建议的那样，您可以将rangeLab视为label 。

Also I would suggest you to create chart once, outside the AJAX request, and just update dataPoints within AJAX. 我也建议您在AJAX请求之外一次创建图表，并只在AJAX中更新dataPoints。 Else, it creates new chart on every AJAX request. 否则，它将在每个AJAX请求上创建新图表。 Please refer Tutorial on Charts from JSON Data API and 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