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