个人中心
gpt4 book ai didi

javascript - 我怎样才能让这个图表显示在 CSS 中的数据表旁边？

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

请引用这个jsfiddle:Google chart API example

这个 CSS 是否有明显的东西可以揭示我如何让图表显示在数据表的右侧而不是下方？或者图表位置是否由 Javascript 控制？你能提供一个解决方案吗？我尝试了各种 CSS 方法来从数据表中拆分图表，但没有成功。

图表确实显示在我的浏览器中，但我无法让它在 jsfiddle 中工作。

(附:Javascript 在上面的 jsfiddle 中——它相当长...)

这是 HTML:

<!DOCTYPE html>
  <head>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/attc.googleCharts.js"></script>
    <link rel="stylesheet" type="text/css" href="cs/attcSandbox.css">
  </head>
  <body>
    <div class="mainContent">
        <table class="left"
            title="Attendance Percentages" 
            id="AttendancePercentages" 
            summary="pieDescription" 
            data-attc-createChart="true"
            data-attc-colDescription="pieDescription" 
            data-attc-colValues="pieValues" 
            data-attc-location="AttendancePercentagesPie" 
            data-attc-hideTable="true" 
            data-attc-type="pie"
            data-attc-googleOptions='{"is3D":true}'
            data-attc-controls='{"showHide":true,"create":true,"chartType":true}'
            >
            <thead>
                <tr>
                    <th id="pieDescription">Description</th>
                    <th id="pieValues">Sessions</th>
                    <th>%</th>
                    <th>Other</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Present</td>
                    <td>405</td>
                    <td>89</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>Missing</td>
                    <td>1</td>
                    <td>0</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Authorised Absent</td>
                    <td>36</td>
                    <td>7</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>Unauthorised Absent</td>
                    <td>1</td>
                    <td>0</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Late</td>
                    <td>30</td>
                    <td>2</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
        <div class="right" id="AttendancePercentagesPie"></div>
        </div>
  </body>
</html>

这是 CSS:

/* @media screen { */
/* override css in main */
body{
    margin-left: 5px; margin-right: 5px;
    margin-top:5px;
    width:100%;
    position:relative;
    left:0px;
    top:0px;
    z-index:0;
    background-color:#FFFFFF;
    color:#47535E;
    font-size:0.7em;
    font-family: Calibri, sans-serif;
}

div.left {
    border: 2px solid #CFBFAF;
    width: 49%;
    float: left;
}

div.right {
    border: 2px solid #CFBFAF;
    width: 49%;
    float: right;
}

div.mainContent{
    margin-left: 20px; margin-right: 20px;
    width:400px;
}
table{
    margin-left: auto; margin-right: auto;
    width:98%;
    border:1px solid #E6E6E6;
    border-radius:5px;
    box-sizing: border-box;
    background-color:#F6F6F6;
    border-collapse: collapse;
}
table td,table th{
    border:1px solid #E6E6E6;
    border-top:1px solid #FFFFFF;
}
table th{
    background-color:#FFFFFF;
}
/*attc classes*/
/*attc classes*/
div.attcControls{
    width:100%;
    border:1px solid #E6E6E6;
    border-radius:5px;
    box-sizing: border-box;
    background-color:#F6F6F6;
}
div.attcControls ul{
    overflow:hidden;
    padding:2px 2px 2px 2px;
    margin:0px;
}
div.attcControls ul li{
    margin:0px;
    padding:0px 0px 0px 10px;
    list-style-type: none;
    display: inline;
    float:right;
    clear:none;
}
div.attcControls ul li a{
    border:1px solid #9CDFF7;
    border-radius:3px;
    box-sizing: border-box;
    background-color:#86D6F5;
    padding:2px;
    color:white;
    text-decoration:none;
    display:inline-block;
    background-image:none;
    font-weight:normal;
}
div.attcControls ul li a:hover{
    border:1px solid white;
    color:#47535E;
}
div.attcControls ul li fieldset{
    border:1px solid #9CDFF7;
    border-radius:3px;
    box-sizing: border-box;
    background-color:#86D6F5;
    padding:2px;
    margin:0px;
    color:white;
    text-decoration:none;
}
div.attcControls ul li fieldset label{
    padding-right:5px;  
}
div.attcControls ul li fieldset select{
    font-size:1em;
    padding:0px;
    margin:0px;
}

input.attcEditCheckRadioBoxes{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* } */

( Source code link here 在 Apache 2.0 license 下)

最佳答案

首先您要指定 div.left 有几件事，因此 table 上的类永远不会从它的类名 left 继承任何属性。其次，表格的宽度为 98%，这意味着它将占据几乎整个 block 并强制所有内容位于上方或下方。理想情况下，您希望左右类应用宽度为 49% 您应该没问题，左右边框增加 2px 等于每个容器总共 4px，实际上应该在 400px 宽的 .mainContent 中达到 1%某些浏览器可能无法完全遵守此尺寸，因此您可能需要稍微减小宽度以适应边框。

关于javascript - 我怎样才能让这个图表显示在 CSS 中的数据表旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15827342/

25 4 0
文章推荐： c - GCC v4.9.2 上无法识别的命令行选项 ‘-rdynamic’
文章推荐： html - 让 Canvas 元素覆盖我的标题/导航
文章推荐： c - 我将如何使用 Ncurses 在屏幕周围制作一个框
文章推荐： css - Highslide In Page Z-Index
太空宇宙
个人简介

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

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