диаграммы Google не отображаются при вызове через JQuery AJAX - PullRequest
Новая
       79

диаграммы Google не отображаются при вызове через JQuery AJAX

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

enter image description here Я пытаюсь использовать диаграмму Google для отображения диаграммы. Мои данные json поступают, когда я проверяю опцию оповещения, чтобы проверить, что данные помещены в список, но в целом диаграмманевозможно отобразить. 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "http://localhost:8080/FRA-UI/api/report19graph/all",
          dataType: "json",
          async: false
          }).responseText;

      alert(JSON.stringify(jsonData));

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

1 Ответ

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

для создания таблицы данных непосредственно из json,
json должен быть в определенном формате, найден здесь ...

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $.ajax({
    url: 'http://localhost:8080/FRA-UI/api/report19graph/all',
    dataType: 'json'
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Range');
    data.addColumn('number', 'Value');

    $.each(jsonData, function (index, row) {
      data.addRow([
        row.rangeLab,
        row.rangeVal
      ]);
    });

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});
  });
});
...