谷歌圖表多次繪製相同的圖表

Question

我想在html中做一個模式對話框，並且當某些東西被按下來在模式中繪製谷歌圖表。

function inter(id) 
{ 
var arr = [['Album','Vizualizari']]; 
$.ajax({ 

url: 'popular.php', 
type: 'GET', 
dataType: 'json', 
success: function (json) { 
    $.each(json,function (i ,value) 
    { 
     var c =[value.title, value.popular]; 
     arr.push(c); 
    }); 

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

    function drawStuff() { 
    google.visualization 
    var data = new google.visualization.arrayToDataTable(arr); 

    var options = { 
     title: 'Chess opening moves', 
     width: 800, 
     legend: { position: 'none' }, 
     bars: 'vertical', // Required for Material Bar Charts. 
     axes: { 
     y: { 
      0: { side: 'top', label: 'Percentage'} // Top x-axis. 
     } 
     }, 
     bar: { groupWidth: "100%" } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
    chart.draw(data, options); 
    }; 
}}); 
} 

它的工作，但只對第一模態。當我嘗試打開另一個模式時，出現以下錯誤：google.charts.load() cannot be called more than once。我如何使用另一個回調繪製圖表，而不是'setOnLoadCallback'？

Answer 1

你的問題是，你的函數包含以下兩行：

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

這是不對的。 google.charts.load()加載谷歌可視化API，setOnLoadCallback()執行一次當API完成加載。但是你不想在加載谷歌可視化時顯示圖表，但是當用戶點擊按鈕（或其他）來顯示模式時。因此，徹底清除setOnLoadCallback和移動load()出全球範圍內 - 簡單地從success處理手動調用drawStuff()：

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

function inter(id) { 
    var arr = [ 
     ['Album', 'Vizualizari'] 
    ]; 
    $.ajax({ 
     url: 'popular.php', 
     type: 'GET', 
     dataType: 'json', 
     success: function(json) { 
      $.each(json, function(i, value) { 
       var c = [value.title, value.popular]; 
       arr.push(c); 
      }); 
      drawStuff(arr); 
     }) 
    }) 

    function drawStuff(arr) { 
     var data = new google.visualization.arrayToDataTable(arr); 
     var options = { 
      title: 'Chess opening moves', 
      width: 800, 
      legend: { 
       position: 'none' 
      }, 
      bars: 'vertical', // Required for Material Bar Charts. 
      axes: { 
       y: { 
        0: { 
         side: 'top', 
         label: 'Percentage' 
        } // Top x-axis. 
       } 
      }, 
      bar: { 
       groupWidth: "100%" 
      } 
     }; 

     var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
     chart.draw(data, options); 
    } 
}