диаграмма не отображается из данных JSON - PullRequest
Новая
       1

диаграмма не отображается из данных JSON

0 голосов
/ 05 июня 2018

На самом деле я хочу показать диаграмму с использованием данных JSON. Когда я ввел URL, данные JSON приходят, но не отображаются в форме диаграммы. Я не получаю никакой ошибки в консоли.

This is the image of my JSON data coming

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;

    }

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

x-значение может быть числовым или значением dateTime и не может быть строкой.Как @ androidnoobie предложил, вы можете рассматривать rangeLab как label .

Также я бы предложил вам создать диаграмму один раз, вне запроса AJAX, и просто обновить dataPoints в AJAX,Иначе, он создает новую диаграмму при каждом запросе AJAX.Пожалуйста, обратитесь Учебник по диаграммам из API данных JSON и 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();
});
0 голосов
/ 05 июня 2018

Так что я думаю, что есть несколько проблем с вашим кодом.Сначала я создал объект, похожий на скриншот, который вы опубликовали для ваших данных: 

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, похоже, ожидает Number для значений x и y.Чтобы сделать то, что вы хотите, я думаю, вам нужно использовать свойство 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...