Google图表多次绘制相同的图表

i'm trying to make a modal dialog in html, and when something is pressed to draw a google chart in the modal.

我正在尝试在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);
  };
}});
}

It worked but only on first modal. When i try to open another modal i've got the follow error : google.charts.load() cannot be called more than once . How can i draw the chart using another callback, not 'setOnLoadCallback' ?

它起作用但仅限于第一模态。当我尝试打开另一个模态时,我得到了以下错误:google.charts.load()不能多次调用。如何使用另一个回调绘制图表,而不是'setOnLoadCallback'?

1 个解决方案

#1

Your problem is that your function contain these two lines :

您的问题是您的函数包含以下两行:

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

This is wrong. google.charts.load() loads the google visualization API and setOnLoadCallback() is executed once when the API has finished loading. But you do not want to show the chart when google visualization is loaded, but when the user click a button (or whatever) to show a modal. So remove setOnLoadCallback completely and move load() out to the global scope - simply call drawStuff() manually from the success handler :

这是错的。 google.charts.load()加载google可视化API,并在API加载完成后执行setOnLoadCallback()一次。但是,您不希望在加载Google可视化时显示图表,但是当用户单击按钮(或其他)以显示模式时。因此,完全删除setOnLoadCallback并将load()移出到全局范围 - 只需从成功处理程序手动调用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);
    }
}