一页上有多个 Google 图表 - 有效地加载库？

Question

我看到很多人询问在一个页面上有多个谷歌图表，答案总是“你的 html/js 是错误的”，或者“只需将它们全部添加到一个在 setOnLoadCallback 中调用的函数中”。

我的问题有点不同。如果我想要按钮，客户端，当点击时，生成一个谷歌图表。我是否需要每次调用“google.load(....)”，然后也需要 setOnLoadCallback，或者是否有某种方法可以将其加载一次，然后从那时起使用已经加载的对象？

我唯一能想到的就是存储一些在第一个 google.setOnLoadCallback 上更新的标志，如果设置了标志，则不要再次加载它，但如果有人快速点击几个按钮，他们就会都已经已发出“加载”函数调用。

基本上我想要一个我可以调用的通用函数（我会自己创建它），但我不希望函数每次都调用 google.load，它只是感觉效率很低。

我如何有效地解决这个问题？

Answer 1

google.load 确实应该在每次页面加载时只调用一次。您不必将所有图表放在一个函数中，您可以创建多个函数并随时调用它们，如下所示：

google.load('visualization', '1.1', {
    packages: ['corechart', 'controls'],
    language: 'en'
});

function drawFirstVisualizations() {
    chart1 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart2 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart1.draw();
    chart2.draw();
}

function drawSecondVisualizations() {
    chart3 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart4 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart3.draw();
    chart4.draw();
}

google.setOnLoadCallback(drawFirstVisualizations);

function functionBeingCalledLater() {
    google.setOnLoadCallback(drawSecondVisualizations);
}