Google可视化图表不显示感谢CSS [英] Google Visualization chart not showing up thanks to CSS
问题描述
您好!
我在显示图表时遇到了一些麻烦。这是一个很奇怪的问题,因为它适用于较旧的笔记本电脑,它的工作原理在野生动物园。但不适用于Chrome /旧版Firefox 4.0。
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.
这是JS代码:
$.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);
});
这个效果就像一个魅力! ...很好在我的老笔记本电脑..和Safari。 Chrome和firefox无法完成这项工作(甚至没有尝试过IE)。
And 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...)
我准确定位问题...当我删除背景时,图表是可见的:css属性的div at)但我真的真的需要背景颜色...
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...
这里是css代码:
.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...
推荐答案
您必须在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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!