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图表工具

这篇关于Google可视化图表不显示感谢CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！