Google Visualization chart does not render after adding CSS

问题

I'm having some troubles with displaying a graph. It's a very strange issue, because it works on older laptops and it works on safari. But not on Chrome / older firefox versions.

This works like a charm! ... well on my older laptop.. and Safari. Chrome and firefox fail to do the job (haven't even tried IE).

I'm also using Impress.js for some fancy transitions... (maybe there's the problem.. but I like to think it isn't because I want to keep the lib...)

I kinda pinpointed the issue... and the chart is visible when I remove the background: css property of the div (where the charts at) but I really really need that background colour...

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

I hope you can help me out by finding some way to display the chart...

回答1:

You have to trigger the first draw event on the event of Google Charts API has completely loaded. Put your complete JavaScript Code into a function and call this function ( here drawChart() ) via the following command:

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

from Quick Start - Google Chart Tools

来源：https://stackoverflow.com/questions/9569478/google-visualization-chart-does-not-render-after-adding-css

标签

javascript

css

charts