Графики Google рисуют один и тот же график несколько раз

Question

Я пытаюсь сделать модальный диалог в html, и когда что-то нажимается, чтобы нарисовать диаграмму google в модальном.

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 визуализации google и setOnLoadCallback() выполняется после, когда API закончил загрузку. Но вы не хотите показывать диаграмму при загрузке визуализации google, но когда пользователь нажимает кнопку (или что-то еще), чтобы показать модальный. Так удалить setOnLoadCallback полностью и перейти load() к глобальной области видимости - просто позвоните drawStuff() вручную из success обработчика:

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