0

我试图在标签中制作我的图表，使用基础“部分”组件。

当我在标签外显示图表时，它看起来很正常：http: //i.imgur.com/BBqgeh2.png 但是当我将相同的代码放在部分内时，它会搞砸：http: //i.imgur.com/lph1rle.png

这是代码：

    <div class="section-container auto" data-section>
        <section>
            <p class="title" data-section-title><a href="#7Days">Section 1</a></p>
            <div class="content" data-section-content>
                    <?php
                        /*
                         * This is the "bugged" chart.
                         */
                        echo $this->GChart->start( 'UserTotalUnique7Day' );
                        echo $this->GChart->visualize( 'UserTotalUnique7Day', $charts[ 'UserTotalUnique7Day' ] );

                    ?>
            </div>
        </section>
        <section>
            <p class="title" data-section-title><a href="#30Days">Section 2</a></p>
            <div class="content" data-section-content>
                Test content
            </div>
        </section>

    </div>
    <?php
        /*
         * This is the same char as above but it isn't in "content" class, so it displays properly.
         */
        echo $this->GChart->start( 'UserTotalUnique7Day2' );
        echo $this->GChart->visualize( 'UserTotalUnique7Day2', $charts[ 'UserTotalUnique7Day' ] );

    ?>

那些 ($this->GChart) 函数生成以下代码：

<div id="UserTotalUnique7Day2" style="position: relative;">
<div dir="ltr" style="position: relative; width: 700px; height: 400px;">
    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
        <svg width="700" height="400" style="overflow: hidden;">
            <defs id="defs">
                <clipPath id="_ABSTRACT_RENDERER_ID_1">
                    <rect x="127" y="77" width="446" height="247"></rect>
                </clipPath>
            </defs>
            <rect x="0" y="0" width="700" height="400" stroke="none" stroke-width="0" fill="#ffffff"></rect>
            <g>
                <text text-anchor="start" x="127" y="54.05" font-family="Arial" font-size="13" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Użytkownicy unikalni w okresach 7 dniowych</text>
            </g>
            <g>
                <rect x="327" y="381" width="45" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                <g>
                    <rect x="327" y="381" width="45" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                    <g>
                        <text text-anchor="start" x="345" y="392.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Ilość</text>
                    </g>
                    <rect x="327" y="381" width="13" height="13" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                </g>
            </g>
            <g>
                <rect x="127" y="77" width="446" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                <g clip-path="url(#_ABSTRACT_RENDERER_ID_1)">
                    <g>
                        <rect x="127" y="323" width="446" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect>
                        <rect x="127" y="262" width="446" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect>
                        <rect x="127" y="200" width="446" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect>
                        <rect x="127" y="139" width="446" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect>
                        <rect x="127" y="77" width="446" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect>
                    </g>
                    <g>
                        <rect x="130" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="147" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="163" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="180" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="196" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="213" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="229" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="246" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="262" y="323.5" width="10" height="0" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="279" y="314" width="10" height="9" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="295" y="283" width="10" height="40" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="312" y="273" width="10" height="50" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="328" y="283" width="10" height="40" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="345" y="160" width="10" height="163" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="361" y="181" width="10" height="142" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="377" y="252" width="10" height="71" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="394" y="242" width="10" height="81" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="410" y="232" width="10" height="91" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="427" y="232" width="10" height="91" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="443" y="191" width="10" height="132" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="460" y="222" width="10" height="101" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="476" y="201" width="10" height="122" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="493" y="263" width="10" height="60" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="509" y="140" width="10" height="183" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="526" y="191" width="10" height="132" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="542" y="232" width="10" height="91" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                        <rect x="559" y="78" width="10" height="245" stroke="none" stroke-width="0" fill="#3366cc"></rect>
                    </g>
                    <g>
                        <rect x="127" y="323" width="446" height="1" stroke="none" stroke-width="0" fill="#333333"></rect>
                    </g>
                </g>
                <g></g>
                <g>
                    <g>
                        <text text-anchor="end" x="141.26574074074074" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 141.26574074074074 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-02-11</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="174.2287037037037" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 174.2287037037037 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-02-25</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="207.19166666666666" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 207.19166666666666 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-03-11</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="240.15462962962962" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 240.15462962962962 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-03-25</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="273.1175925925926" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 273.1175925925926 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-04-08</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="306.0805555555555" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 306.0805555555555 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-04-22</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="339.04351851851845" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 339.04351851851845 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-05-06</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="372.00648148148144" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 372.00648148148144 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-05-20</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="404.96944444444443" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 404.96944444444443 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-06-03</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="437.93240740740737" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 437.93240740740737 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-06-17</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="470.89537037037036" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 470.89537037037036 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-07-01</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="503.8583333333333" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 503.8583333333333 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-07-15</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="536.8212962962963" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 536.8212962962963 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-07-29</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="569.7842592592592" y="339.90291404515136" font-family="Arial" font-size="13" transform="rotate(-30 569.7842592592592 339.90291404515136)" stroke="none" stroke-width="0" fill="#222222">2013-08-12</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="114" y="328.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">0</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="114" y="266.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">6</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="114" y="205.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">12</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="114" y="143.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">18</text>
                    </g>
                    <g>
                        <text text-anchor="end" x="114" y="82.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">24</text>
                    </g>
                </g>
            </g>
            <g></g>
        </svg>
    </div>
</div>
<div style="display: none; position: absolute; top: 410px; left: 710px; white-space: nowrap; font-family: Arial; font-size: 13px;">Ilość</div>
<div></div>


<script type="text/javascript">
function doThatChart(){ 

var data = new google.visualization.arrayToDataTable(
[
[ 'ID', 'Ilość'],
['2013-02-11', 0],
['2013-02-18', 0],
['2013-02-25', 0],
['2013-03-04', 0],
['2013-03-11', 0],
['2013-03-18', 0],
['2013-03-25', 0],
['2013-04-01', 0],
['2013-04-08', 0],
['2013-04-15', 1],
['2013-04-22', 4],
['2013-04-29', 5],
['2013-05-06', 4],
['2013-05-13', 16],
['2013-05-20', 14],
['2013-05-27', 7],
['2013-06-03', 8],
['2013-06-10', 9],
['2013-06-17', 9],
['2013-06-24', 13],
['2013-07-01', 10],
['2013-07-08', 12],
['2013-07-15', 6],
['2013-07-22', 18],
['2013-07-29', 13],
['2013-08-05', 9],
['2013-08-12', 24],
]);
        var chart = new google.visualization.ColumnChart(document.getElementById("UserTotalUnique7Day2"));
        chart.draw(data, {"title":"U\u017cytkownicy unikalni w okresach 7 dniowych","width":700,"height":400,"is3D":"true","legend":"bottom"});

}
    google.setOnLoadCallback(doThatChart());
</script>

你知道是什么原因造成的吗？

4

1 回答 1

0

我有同样的问题，使用基础“标签”，但使用谷歌饼图。馅饼变小了，传说没有“分页”，而是一个接一个。最后我发现如果我在默认情况下在活动部分选项卡（部分类 =“活动”）处显示图形，则没有问题。出现该部分的内容 div 只需要显示为块。所以我的工作是为所需的选项卡提供一个特殊的类：

<div class="section-container auto" data-section>
  <section class="active">
    <div class="title" data-section-title>Active Section 1</div>
    <div class="content" data-section-content>                          
        Content 1                               
    </div>
  </section>         
  <section>
    <div class="title" data-section-title>Chart Tab Section 2</div>
    <div class="content tabPie" data-section-content >                    
      <div id="newsCats">Chart goes here</div>    
    </div>
  </section>          
</div>

我的CSS在这里：

.section-container.auto > section > .content.tabPie {display:block; visibility:hidden;}
.section-container.auto > section.active > .content.tabPie {visibility:visible;}

该部分下方可能存在一些偏移，因此请考虑在非活动部分内容中添加负边距底部，并在活动时将其删除（如有必要，将两者结合起来，上面的样式和下面的样式）：

.section-container.auto > section > .content.tabPie {margin-bottom: -405px;}
.section-container.auto > section.active > .content.tabPie {margin-bottom:0;}

这个技巧就像一个奇迹！

于 2013-11-20T10:02:51.143 回答