添加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);
这篇关于添加CSS后无法呈现Google Visualization图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!