多個Google圖表無法在同一頁面上正確顯示

Question

我在單個頁面上顯示了4個圖表。 當單獨繪制時，它們工作得很好，但是當我嘗試超過1個時，它們並不會全部顯示。 我還注意到，在調整窗口大小（從而刷新圖表）時，“活動”圖表可以更改。

這是我繪制圖表的方法：

function drawChart() {
    // Occurrences per step
    var data_occ =  new google.visualization.DataTable();
    data_occ.addColumn('string', 'Step');
    data_occ.addColumn('number', 'Number');
    data_occ.addRows([
        ['NO_STOP_DEP', 2057],
        ['FIND_STOPS_DEP', 795],
        ['FIND_STOPS_ARR', 423],
        ['FIND_ROUTES', 416],
        ['FIND_PATHS_0', 416],
        ['NO_STOP_ARR', 371],
        ['FIND_PATHS_1', 359],
        ['JOURNEY_GET_1CONNECTION_FAILED', 274],
        ['FIND_PATHS_2', 274],
        ['JOURNEY_GET_1CONNECTION_t1d', 185],
        ['OK', 147],
        ['JOURNEY_GET_2CONNECTION_t1d', 145],
        ['JOURNEY_GET_1CONNECTION_t1a', 138],
        ['NO_PATH', 129],
        ['JOURNEY_GET_2CONNECTION_FAILED', 118],
        ['NO_JOURNEY', 118],
        ['JOURNEY_GET_1CONNECTION_cs1', 117],
        ['JOURNEY_GET_1CONNECTION_t2d', 115],
        ['JOURNEY_GET_DIRECT_t1d', 111],
        ['JOURNEY_GET_2CONNECTION_t1a', 79],
        ['JOURNEY_GET_2CONNECTION_cs1', 75],
        ['JOURNEY_GET_2CONNECTION_t2d', 73],
        ['JOURNEY_GET_2CONNECTION_t2a', 66],
        ['JOURNEY_GET_2CONNECTION_cs2', 66],
        ['JOURNEY_GET_2CONNECTION_t3d', 66],
        ['JOURNEY_GET_1CONNECTION', 65],
        ['JOURNEY_GET_DIRECT', 56],
        ['JOURNEY_GET_DIRECT_FAILED', 54],
        ['JOURNEY_GET_2CONNECTION', 26],
        ['NO_ROUTE_ARR', 4],
        ['NO_ROUTE_DEP', 3]
    ]);
    var opt_occ = {
        chart: {
            title: 'Occurrences of each step'
        }
    };
    var chart_occ = new google.charts.Bar(document.getElementById('chart_occ'));
    chart_occ.draw(data_occ, opt_occ);

    // Sum of durations per step
    var data_dur =  new google.visualization.DataTable();
    data_dur.addColumn('string', 'Step');
    data_dur.addColumn('number', 'Duration');
    data_dur.addRows([
        ['JOURNEY_GET_2CONNECTION_t2d', 4271651.423530579],
        ['NO_STOP_DEP', 954578.8992916346],
        ['FIND_STOPS_DEP', 711477.470664978],
        ['JOURNEY_GET_DIRECT_t1d', 604728.3424301147],
        ['JOURNEY_GET_1CONNECTION_t2d', 483084.8451423645],
        ['JOURNEY_GET_1CONNECTION_t1d', 399811.6393585205],
        ['JOURNEY_GET_2CONNECTION_t3d', 391471.8716468811],
        ['FIND_PATHS_1', 173883.78058815002],
        ['FIND_STOPS_ARR', 164751.4531224966],
        ['JOURNEY_GET_2CONNECTION_t1d', 158291.4034690857],
        ['FIND_PATHS_2', 154918.55130004883],
        ['FIND_ROUTES', 125470.71777877212],
        ['NO_STOP_ARR', 82222.14379951358],
        ['JOURNEY_GET_1CONNECTION_cs1', 45374.44926452637],
        ['JOURNEY_GET_1CONNECTION_t1a', 29688.884063720703],
        ['JOURNEY_GET_2CONNECTION_cs2', 21626.706924438477],
        ['JOURNEY_GET_2CONNECTION_cs1', 13983.793979644775],
        ['JOURNEY_GET_2CONNECTION_t2a', 13081.894062042236],
        ['JOURNEY_GET_1CONNECTION', 11718.449104309082],
        ['JOURNEY_GET_2CONNECTION_FAILED', 9777.992935180664],
        ['JOURNEY_GET_1CONNECTION_FAILED', 9182.082992315292],
        ['JOURNEY_GET_DIRECT', 8991.909969329834],
        ['JOURNEY_GET_2CONNECTION_t1a', 8132.20499420166],
        ['NO_ROUTE_ARR', 5709.329235076904],
        ['JOURNEY_GET_DIRECT_FAILED', 5620.268951416016],
        ['FIND_PATHS_0', 4501.938883662224],
        ['JOURNEY_GET_2CONNECTION', 3359.796012878418],
        ['NO_PATH', 1778.0850104540586],
        ['OK', 1419.4850099533796],
        ['NO_JOURNEY', 1267.5709964483976],
        ['NO_ROUTE_DEP', 334.49600982666016]
    ]);
    var opt_dur = {
        chart: {
            title: 'Cumulative duration of each step (ms)'
        }
    };
    var chart_dur = new google.charts.Bar(document.getElementById('chart_dur'));
    chart_dur.draw(data_dur, opt_dur);

    // Average of durations per step
    var data_dur_avg =  new google.visualization.DataTable();
    data_dur_avg.addColumn('string', 'Step');
    data_dur_avg.addColumn('number', 'Duration');
    data_dur_avg.addRows([
        ['NO_ROUTE_DEP', 111.49866994222005],
        ['NO_ROUTE_ARR', 1427.332308769226],
        ['JOURNEY_GET_DIRECT', 160.5698208808899],
        ['NO_PATH', 13.783604732202004],
        ['JOURNEY_GET_1CONNECTION_cs1', 387.8158056797125],
        ['JOURNEY_GET_1CONNECTION_t2d', 4200.737783846648],
        ['JOURNEY_GET_1CONNECTION', 180.2838323739859],
        ['JOURNEY_GET_2CONNECTION_t1a', 102.93930372407165],
        ['JOURNEY_GET_2CONNECTION_cs1', 186.45058639526368],
        ['JOURNEY_GET_2CONNECTION_t2d', 58515.77292507642],
        ['JOURNEY_GET_2CONNECTION_t2a', 198.21051609154904],
        ['JOURNEY_GET_2CONNECTION_cs2', 327.6773776430072],
        ['JOURNEY_GET_2CONNECTION_t3d', 5931.3919946497135],
        ['JOURNEY_GET_2CONNECTION', 129.22292357224686],
        ['OK', 9.656360611927752],
        ['NO_STOP_ARR', 221.623029109201],
        ['JOURNEY_GET_1CONNECTION_t1a', 215.13684104145437],
        ['NO_STOP_DEP', 464.06363601926813],
        ['FIND_STOPS_DEP', 894.9402146729284],
        ['FIND_STOPS_ARR', 389.483340715122],
        ['FIND_ROUTES', 301.6123023528176],
        ['FIND_PATHS_0', 10.821968470341885],
        ['JOURNEY_GET_DIRECT_t1d', 5448.003084955989],
        ['JOURNEY_GET_DIRECT_FAILED', 104.07905465585215],
        ['FIND_PATHS_1', 484.35593478593324],
        ['JOURNEY_GET_1CONNECTION_t1d', 2161.1439965325435],
        ['JOURNEY_GET_1CONNECTION_FAILED', 33.51125179677114],
        ['FIND_PATHS_2', 565.3961726279155],
        ['JOURNEY_GET_2CONNECTION_t1d', 1091.6648515109357],
        ['JOURNEY_GET_2CONNECTION_FAILED', 82.86434690831071],
        ['NO_JOURNEY', 10.742127088545743]
    ]);
    var opt_dur_avg = {
        chart: {
            title: 'Average duration of each step (ms)'
        }
    };
    var chart_dur_avg = new google.charts.Bar(document.getElementById('chart_dur_avg'));
    chart_dur_avg.draw(data_dur_avg, opt_dur_avg);

    // Average duration comparison today vs yesterday
    var data_dur_avg_cmp =  new google.visualization.DataTable();
    data_dur_avg_cmp.addColumn('string', 'Step');
    data_dur_avg_cmp.addColumn('number', 'Yesterday');
    data_dur_avg_cmp.addColumn('number', 'Today');
    data_dur_avg_cmp.addRows([
    ]);
    var opt_dur_avg_cmp = {
        chart: {
            title: 'Average duration of each step (ms)'
        }
    };
    var chart_dur_avg_cmp = new google.charts.Bar(document.getElementById('chart_dur_avg_cmp'));
    chart_dur_avg_cmp.draw(data_dur_avg_cmp, opt_dur_avg_cmp);
}

我還將代碼上傳到jsfiddle中，以便您自己查看。 您可以在頂部播放整數，以選擇要顯示的圖形。 具有一個非2的冪的值（即，顯示多個圖形）將導致以下情況：

• div的大小將被確定，我的意思是布局表明存在
• 不會在div中繪制任何內容

這是一個示例，其中繪制了2個圖形，一個圖形正確繪制，第二個圖形為空白：

我們可以清楚地看到“ 平均持續時間” div有一個大小，但為空白。

Answer 1

這是在google-visualization-issues存儲庫中報告的已知問題 ：

人們在使用物料圖的多個實例確定大小時所遇到的問題應通過此新版本解決。 您可以更改代碼以立即加載“ 1.1”，以便在候選版本可用時使用。

目前至少有兩種解決方案。

選項1.使用凍結的版本加載器。

由於v43候選版本的發布將解決此問題，因此切換到使用凍結版本加載程序。

腳步：

1）添加對加載程序的引用： <script src="http://www.gstatic.com/charts/loader.js"></script>

2）然后加載43版本的庫： google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });

3）替換google.setOnLoadCallback(drawChart); 與google.charts.setOnLoadCallback(drawChart);

修改后的jsfiddle

選項2。同步渲染圖表

由於draw函數是異步的 ，因此我們利用ready事件處理程序按順序繪制圖表，在這種情況下，應正確呈現多個圖表，如下所示。

function drawChart(chartsQueue,index) {
    index = index || 0;
    if (index === chartsQueue.length)
        return;



    var chart = new google.charts.Bar(document.getElementById(chartsQueue[index].id));
    google.visualization.events.addOneTimeListener(chart, 'ready', function() {
        drawChart(chartsQueue, index + 1); //draw next chart
    });
    chart.draw(chartsQueue[index].data, chartsQueue[index].options);
}

修改后的jsfiddle