个人中心
gpt4 book ai didi

javascript - 谷歌图表文本丢失

转载 作者：太空宇宙 更新时间：2023-11-04 15:28:53 25 4
gpt4 key购买 nike

我从 google chart example 创建了测试元素.但是，然后在从图表中添加一些 css 文本之后是 missed像下面这样。我究竟做错了什么？

这是 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;
}

和 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>

谢谢 enter image description here

附言我不确定正确的 css，所以如果您知道快速、轻松、简单和清楚地设置 css 的方法，请分享。

最佳答案

问题

问题是 div CSS 中的标记:

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

如果您在渲染图表后查看 HTML 对象，上面的 CSS 被注释掉，图表如下所示:

<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 创建了 2 个额外的 <div> <div> 内的元素您创建的元素，它以自己的方式设置这些 div 的宽度/高度。还有额外的<div>这些元素 <div>元素，如果你进一步挖掘包含图例标签和标题文本之类的东西。所以为所有 <div> 设置一个通用的 CSS 规则元素会导致 Google 行为不当，无法正确呈现文本。

解决方案

删除通用 div CSS 元素，并将其替换为更本地化的元素，以便 Google API 可以创建自己的 <div>无干扰的元素。

或者，为图表创建一个不同的 CSS 元素 div覆盖通用规则并允许 Google 执行其操作的元素。

关于javascript - 谷歌图表文本丢失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16706355/

25 4 0
文章推荐： javascript - 可拖动 - 如何限制可拖动元素越过屏幕底部？
文章推荐： c++ - 避免 printscreen 函数渲染文本
文章推荐： css - 如何在悬停时使背景宽度动画流畅
文章推荐： c++ - 在 C++ 中调整动态堆栈分配的大小
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com