Несколько диаграмм 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); 
} 

Я также загрузил код a jsfiddle, так что вы можете видеть сами. Вы можете играть с целым числом вверху, чтобы выбрать, какие графики будут отображаться. Имея значение, которое не является степенью 2 (то есть, отображение более одного графика) вызовет следующее:

• DIV будет иметь такой размер, я имею в виду расположение указывает на то, что он не присутствует
• ничего будет нарисован в DIV

Вот пример 2 графиков нарисован, один правильно обращается и второй из них является пустым:

Мы можем ясно видеть, что Средняя продолжительность div имеет размер, но пробел.

Answer 1

Это the known issue, что было сообщено в 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) Replace google.setOnLoadCallback(drawChart); с google.charts.setOnLoadCallback(drawChart);

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

Modified jsfiddle