添加CSS后无法呈现Google Visualization图表 [英] 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.

这就像一个魅力！ ...在我较旧的笔记本电脑上以及Safari上也是如此。 Chrome和firefox无法胜任（甚至没有尝试过IE）。

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).

我也在使用Impress.js进行一些奇特的转换...（也许是问题所在。。但我想不是因为我想保持lib ...）

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...)

我有点指出问题所在...删除背景后，该图表可见：div的css属性（其中的图表为在），但我真的真的需要该背景色...

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希望您能找到某种显示图表的方式来帮助我...

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

推荐答案

您必须触发第一个绘制事件如果Google Charts API已完全加载。
将完整的JavaScript代码放入函数中，然后通过以下命令调用此函数（在这里drawChart（））：

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

来自快速入门-Google图表工具

这篇关于添加CSS后无法呈现Google Visualization图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！