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.

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

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

FragmentManager fragmentManager = getFragmentManager();
//FragmentTransaction
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fourteenqsn fq = new fourteenqsn();
fragmentTransaction.replace(R.id.thirteenqsn, fq);
Bundle args = new Bundle();
args.putInt("score",marks);
args.putInt("parti",participatent);
fq.setArguments(args);
fragmentTransaction.commit();

为了得到你想要的格式，我循环遍历数组中的每个对象，并将“x”指定为第一个对象的值，将“y”指定为第二个对象的值：

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

这给了我CanvasJS所期望的正确格式的$.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}]和Number的值为x。为了做你想做的事，我认为你需要使用y属性。所以我将循环代码更改为：

label

然后它似乎正确呈现。

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

Answer 2

x-value可以是数字或dateTime值，也不能是字符串。如@androidnoobie建议您可以将rangeLab视为label。

另外我建议你在AJAX请求之外创建一次图表，然后在AJAX中更新dataPoints。否则，它会在每个AJAX请求上创建新图表。请参阅Tutorial on Charts from JSON Data API and 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();
});

chart is not showing from JSON data

2 个答案: