Google图表文字丢失 [英] Google chart text is missing

查看：171
本文介绍了Google图表文字丢失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我从 google图表示例创建了测试项目。但是，添加一些来自图表的css文本后，错过了如下所示。我究竟做错了什么？



这是CSS： 

  html，
 body {
 font-size：100％; 
身高：100％; 
宽度：100％; 
} 
 
 body {
 background：white; 
颜色：＃030404; 
 padding：0; 
保证金：0; 
 font-family：Tahoma，SergoUI，Helvetica，Arial，sans-serif; 
 font-weight：normal; 
 font-style：normal; 
 line-height：1; 
} 
 
标题{
 height：20％; 
} 
 
部分{
 height：75％; 
} 
 
页脚{
 height：5％; 
} 
 
 
 .FirstTopLine {
 height：20％; 
} 
 
 .SecondTopLine {
 height：80％; 
} 
 
 .SecondTopLine，footer {
 background：＃1b7297; 
背景：线性渐变（270deg，＃1b7297，＃3dafc9）; 
} 
 
 
 div {
 / *背景：小麦; * / 
高度：100％; 
宽度：100％; 
} 
 
 .wrapper {
 width：100％; 
身高：100％; 
} 
 
 .cellone {
 float：left; 
宽度：5％; 
明确：两者; 
} 
 
 .celltwo {
 float：left; 
宽度：15％; 
} 
 
 .cellfree {
 float：left; 
宽度：40％; 
} 
 
 .cellfour {
 float：left; 
宽度：40％; 
} 
 
 img {
最大高度：100％; 
最大宽度：100％; 
} 
 
 .reportname {
 color：＃f7ad36; 
} 
 
 .companyfont {
颜色：＃1b7297; 
}

和HTML： 

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =viewportcontent =width = device-width/> 
< title>报告模板< /标题> 
< link rel =stylesheethref =css / style.css/> 
 
< script type =text / javascriptsrc =js / jsapi.js>< / script> 
< script type =text / javascript> 
 
 //加载可视化API和饼图包。 
 google.load（'visualization'，'1.0'，{'packages'：['corechart'，'table']}）; 
 
 //设置回调以在加载Google Visualization API时运行。 
 google.setOnLoadCallback（drawChart）; 
 
 //创建并填充数据表的回调，
 //实例化饼图，传入数据并
 //绘制它。 
函数drawChart（）{
 
 //创建数据表。 
 // var data = google.visualization.arrayToDataTable（[
 // ['Task'，'Hours per Day']，
 // ['Work'，11]，
 // ['吃'，2]，
 // ['Commute'，2]，
 // ['看电视'，2]，
 // ['Sleep '，7] 
 //]）; 
 
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Topping'）; 
 data.addColumn（'number'，'Slices'）; 
 data.addRows（[
 ['Mushrooms'，3]，
 ['Onions'，1]，
 ['Olives'，1]，
 [ '西葫芦'，1]，
 ['Pepperoni'，2] 
]）; 
 
 //设定图表选项
 var options = {
'title'：'我昨晚吃了多少披萨'，
'width'：600，
'身高'：400 
}; 
 
 //实例化并绘制我们的图表，并传入一些选项。 
 var chart = new google.visualization.PieChart（document.getElementById（'chart_div'））; 
 chart.draw（data，options）; 
 var table = new google.visualization.Table（document.getElementById（'table'））; 
 table.draw（data，{showRowNumber：true}）; 
} 
< / script> 
< / head> 
< body> 
< header> 
 
< div class =FirstTopLine> 
< div class =wrapper> 
< div class =cellone> 
 
< / div> 
< div class =celltwo> 
< h4 class =companyfont> 28.05.2013< / h4> 
< / div> 
< div class =cellfree> 
 
< / div> 
< div class =cellfour> 
 
< / div> 
< / div> 
< / div> 
 
 
< div class =SecondTopLine> 
< div class =wrapper> 
< div class =cellone> 
 
< / div> 
< div class =celltwo> 
< a href =http://gharysh.kzclass =logo> 
< img src =img / logoKGS.pngalt =哈萨克斯坦Gharysh Sapari/> 
< / a> 
< / div> 
< div class =cellfree> 
< h1 class =reportname>报告名称23< / h1> 
< / div> 
< div class =cellfour> 
 
< / div> 
< / div> 
< / div> 
< / header> 
 
< section> 
< div class =wrapper> 
< div class =cellone> 
 
< / div> 
< div class =celltwo> 
< div class =chartdescription> 
< h3 class =companyfont>报告描述32< / h3> 
< / div> 
< / div> 
< div class =cellfree> 
< h2 class =companyfont>图表33< / h2> 
< div id =chart_div> 
< / div> 
< / div> 
< div class =cellfour> 
< h2 class =companyfont>表34< / h2> 
< div id =table> 
< / div> 
< / div> 
< / div> 
< / section> 
 
< footer> 
< div class =wrapper> 
< div class =cellone> 
 
< / div> 
< div class =celltwo> 
< h6 class =reportname>从SMDPO 42生成< / h6> 
< / div> 
< div class =cellfree> 
 
< / div> 
< div class =cellfour> 
 
< / div> 
< / div> 
< / footer> 
< / body> 
< / html>

感谢





PS我不确定正确的CSS，所以如果你知道如何快速，简单，清楚地设置CSS，请分享。

解决方案

问题



问题是 div tag在你的CSS中：

  div {
 / * background：wheat; * / 
身高：100％; 
宽度：100％; 
 
 
 
 
 
 $ b 
如果您在使用上面的CSS注释呈现图表之后查看HTML对象这是图表的样子：
 < div id =chart_divstyle =position：relative; > 
< div style =position：relative; width：600px; height：400px; DIR = LTR > ...< / div> 
< div style =display：none; position：absolute; top：410px; left：610px; white-space：nowrap; font-family：Arial; font-size：13px;> ...< / div> 
< div>< / div> 
< / div> 
  
 Google Charts创建2个额外的< div> 元素创建的< div> 元素，它以自己的方式设置这些div的宽度/高度。在< div> 元素中还有< div> 元素，如果您进一步挖掘包含像图例标签和标题文本。因此，为所有< div> 元素设置通用CSS规则会导致Google行为异常，并且无法正确呈现文本。
 
 
 
解决方案
 
 
 
删除通用 div  CSS元素，并将其替换为更加本地化的元素，以便Google API可以创建自己的< div> 元素而不受干扰。 code> div 元素，这些元素覆盖了通用规则并允许Google执行其操作。
 
I created test project from google chart example. But, then after adding some css text from chart is being missed like that below. What am I doing wrong? 



This is CSS:
html,
body {
    font-size: 100%;
    height: 100%;
    width: 100%;
}

body {
    background: white;
    color: #030404;
    padding: 0;
    margin: 0;
    font-family: "Tahoma", "SergoUI", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
}

header {
    height: 20%;
}

section {
    height: 75%;
}

footer {
    height: 5%;
}


.FirstTopLine {
    height: 20%;
}

.SecondTopLine {
    height: 80%;
}

.SecondTopLine, footer {
    background: #1b7297;
    background:linear-gradient(270deg, #1b7297, #3dafc9) ;
}


div {
    /*background: wheat;*/
    height: 100%;
    width: 100%;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.cellone {
    float: left;
    width: 5%;
    clear: both;
}

.celltwo {
    float: left;
    width: 15%;
}

.cellfree {
    float: left;
    width: 40%;
}

.cellfour {
    float: left;
    width: 40%;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.reportname {
    color: #f7ad36;
}

.companyfont {
    color: #1b7297;
}

And HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Report Template</title>
    <link rel="stylesheet" href="css/style.css" />

    <script type="text/javascript" src="js/jsapi.js"></script>
    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart', 'table']});

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

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create the data table.
//            var data = google.visualization.arrayToDataTable([
//                ['Task', 'Hours per Day'],
//                ['Work',     11],
//                ['Eat',      2],
//                ['Commute',  2],
//                ['Watch TV', 2],
//                ['Sleep',    7]
//            ]);

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);

            // Set chart options
            var options = {
                'title' : 'How Much Pizza I Ate Last Night',
                'width' : 600,
                'height': 400
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            var table = new google.visualization.Table(document.getElementById('table'));
            table.draw(data,{showRowNumber: true});
        }
    </script>
</head>
<body>
    <header>

        <div class="FirstTopLine">
            <div class="wrapper">
                <div class="cellone">

                </div>
                <div class="celltwo">
                    <h4 class="companyfont">28.05.2013</h4>
                </div>
                <div class="cellfree">

                </div>
                <div class="cellfour">

                </div>
            </div>
        </div>


        <div class="SecondTopLine">
            <div class="wrapper">
                <div class="cellone">

                </div>
                <div class="celltwo">
                    <a href="http://gharysh.kz" class="logo">
                        <img src="img/logoKGS.png" alt="Kazakhstan Gharysh Sapari" />
                    </a>
                </div>
                <div class="cellfree">
                    <h1 class="reportname">Report Name 23</h1>
                </div>
                <div class="cellfour">

                </div>
            </div>
        </div>
    </header>

    <section>
        <div class="wrapper">
            <div class="cellone">

            </div>
            <div class="celltwo">
                <div class="chartdescription">
                      <h3 class="companyfont">Report Description 32</h3>
                </div>
            </div>
            <div class="cellfree">
                <h2 class="companyfont">Chart 33</h2>
                <div id="chart_div">
                </div>
            </div>
            <div class="cellfour">
                <h2 class="companyfont">Table 34</h2>
                <div id="table">
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="wrapper">
            <div class="cellone">

            </div>
            <div class="celltwo">
                <h6 class="reportname">Generated from SMDPO 42</h6>
            </div>
            <div class="cellfree">

            </div>
            <div class="cellfour">

            </div>
        </div>
    </footer>
</body>
</html>

Thanks






P.S. I'm not sure about correct css, so if you know way to set css fastly, easily, simply and clearly, please share. 
 解决方案 
Problem



The issue is the div tag in your CSS:
div {
    /*background: wheat;*/
    height: 100%;
    width: 100%;
}

If you look at the HTML object after rendering the chart with the above CSS commented out, this is what the chart looks like:
<div id="chart_div" style="position: relative;">
  <div style="position: relative; width: 600px; height: 400px;" dir="ltr"> … </div>
  <div style="display: none; position: absolute; top: 410px; left: 610px; white-space: nowrap; font-family: Arial; font-size: 13px;"> … </div>
  <div></div>
</div>

Google Charts creates 2 additional <div> elements inside the <div> element that you create, and it sets the width/height of those divs its own way. There are additional <div> elements within those <div> elements if you dig down further that contain things like the legend labels and title text. So setting a universal CSS rule for all <div> elements causes Google to misbehave and not render text properly.



Solution



Remove the universal div CSS element, and replace it with a more localized one so that the Google API can create its own <div> elements without interference.



Alternatively, create a different CSS element for chart div elements that override the universal rules and allow Google to do its thing.


                        
这篇关于Google图表文字丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆