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

Question

I've seen MANY people ask about having multiple Google Charts on one page, and the answer is always "your html/js is wrong", or "just add all of them in one function that's called in the setOnLoadCallback".

My issue is a bit different. What if I want buttons, client side, that, when clicked, generate a Google Chart. Do I need to call "google.load(....)" time, and then setOnLoadCallback as well, or is there some way to load it ONCE, and then from that point forward just use the already loaded objects?

The only thing I can think of is to store some flag that's updated on the very first google.setOnLoadCallback, and if flag is set, don't load it again, but if someone clicks a few buttons quickly they will all already have issued "load" function calls.

Basically I want one generic function that I can call (I will create it myself) but I don't want the function calling google.load everytime, it just feels really inefficient.

How do I go about this efficiently?

Answer 1

google.load should indeed be called only once per page load. You don't have to put all your charts into one function, you can create several functions and call them whenever you want, as following:

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