Question

我创建了一个谷歌饼图，它从JSON文件中获取数据。但即使图表显示正确，我也有错误。错误是：主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。

如果我将async更改为true，则错误消失，但是不会显示饼图，而是表示该表没有列。

   <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({         
          url: "getData.php",
          dataType: "json",
          async: false
          }).responseText;
            var options = {


        };

      // 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('piechart'));
      chart.draw(data);



 chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  }, false);
};
        </script>       

    <body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div id="piechart" class="embed-responsive-item"></div>

Answer 1

需要等到请求完成，
移动done回调中的所有内容......

请参阅以下摘录...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
    url: "getData.php",
    dataType: "json",
  }).done(function (jsonData) {
    var options = {};
    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  });
};

谷歌饼图从json文件错误检索信息 - 不推荐使用主线程上的同步XMLHttpRequest

1 个答案: