Question

我正在使用Google Charts在我的网页上显示饼图。我通过使用JavaScript和PHP从我的数据库中提取数据来显示图表。

但是，我遇到了一个问题，即当我右键单击检查元素时，我的图表才会显示。我不确定我的代码是否有任何问题。

这是JavaScript的代码：

google.charts.load("current", {packages:["corechart"]});        
google.setOnLoadCallback(drawChart);
  function drawChart() {
    var jsonData = 
        $.ajax({
            type: "POST",
            url: "./handle/getChartsInfo.php",
            dataType: 'json',
            async: false
        }).responseText; 

    var chartData = new google.visualization.DataTable(jsonData);

    var options = {
      title: 'My Policies',
      pieHole: 0.5,
      pieSliceText: 'none',
      tooltip: {isHtml: true},
      backgroundColor: 'none',
      colors: ["#F7464A", "#46BFBD", "#FDB45C"]
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(chartData, options);
  }

我也在Chrome上收到一条警告：

主线程上的同步XMLHttpRequest因不推荐使用它对最终用户的体验产生不利影响。如需更多帮助，检查https://xhr.spec.whatwg.org/。

提前感谢您的帮助！

Answer 1

删除async: false会阻止同步XMLHttpRequest 警告

google.charts.load('current', {
  callback: function () {
    $.ajax({
      type: 'POST',
      url: './handle/getChartsInfo.php',
      dataType: 'json'
    }).done(function (jsonData) {
      var chartData = new google.visualization.DataTable(jsonData);
      var options = {
        title: 'My Policies',
        pieHole: 0.5,
        pieSliceText: 'none',
        tooltip: {isHtml: true},
        backgroundColor: 'none',
        colors: ['#F7464A', '#46BFBD', '#FDB45C']
      };
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(chartData, options);
    }).fail(function (jq, text, errMsg) {
      console.log(errMsg);
    });
  },
  packages:['corechart']
});

Google图表仅在单击inspect元素后显示

1 个答案: