Несколько экземпляров в Google Charts

Question

Я пытаюсь получить 2 экземпляра графиков Google, но появляется только последний.

Вот код:

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

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

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

     // 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}); 

    } 


    //Chart 2 

    google.load('visualization', '1', {'packages':['corechart']}); 

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

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

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

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

    } 

Что я здесь делаю неправильно?

Answer 1

Вам необходимо позвонить google.load ('visualization', '1', {'packages': ['corechart']}); только один раз. Я бы предложил функцию инициализации, которая бы перегруппировала все ваши функции drawchart(). Смотри ниже. Кроме того, ваш код выглядит отлично и должен работать.

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

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

function initialize() { 
    drawChart(); 
    drawChart2(); 
} 


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

    // 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}); 

} 



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

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

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

}