Диаграмма визуализации Google не отображается после добавления CSS

Question

У меня проблемы с отображением графика. Это очень странная проблема, потому что она работает на старых ноутбуках и работает на сафари. Но не в Chrome / более старых версиях Firefox.

Это работает как шарм! ... хорошо на моем старом ноутбуке .. и Safari. Chrome и Firefox не справляются с этой задачей (даже не пробовали IE).

Я также использую Impress.js для некоторых причудливых переходов ... (возможно, есть проблема ... но мне нравится думать, что это не потому, что я хочу сохранить библиотеку ...)

Я точно определил проблему ... и диаграмма видна, когда я удаляю свойство background: css в div (где диаграммы), но мне действительно нужен этот цвет фона ...

$.getJSON(q_project_info, function(results) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'xxxxxx');
    data.addColumn('number', 'xxxxx');
    $.each(results.d, function(i, v) {
      ................
    });
    var options = {
      title: 'xxxxxxxx',
      height: '300',
      backgroundColor: '#F5F5F5',
      colors: ['#036109', '#58892d'],
      legend: 'none'
    };
    var chart = new google.visualization.AreaChart(document.getElementById('xxxxxxxxx'));
    chart.draw(data, options);
  }

);

.slide {
  /**/
  display: block;
  width: 900px;
  height: 700px;
  padding: 40px 60px;
  border-radius: 10px;
  /**/
  background: #F5F5F5;
  border: 1px solid rgba(0, 0, 0, .3);
  font-family: 'Open Sans', Arial, sans-serif;
  color: rgb(102, 102, 102);
}

Надеюсь, вы поможете мне, найдя способ отобразить график ...

Answer 1

Вы должны активировать первое событие рисования, если API Google Charts полностью загружено.Поместите свой полный код JavaScript в функцию и вызовите эту функцию (здесь drawChart ()) с помощью следующей команды:

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

из Быстрый запуск - Инструменты Google Chart