谷歌图表多次绘制相同的图表

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