Googleのチャートのみを表示要素

Question

を検査上のクリックした後、私は自分のWebページ上の円グラフを表示するには、Googleのチャートを使用しています。 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); 
    } 

それが言うことによって私もクロームの警告を取得しています：メインスレッド上

同期のXMLHttpRequestをするため その弊害で廃止されましたエンドユーザーの経験詳細については、 チェックhttps://xhr.spec.whatwg.org/をご覧ください。

は、任意の助けを事前にありがとうございます！ async: falseを削除

Answer 1

はそれがない同期の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'] 
});