我尝试使用基础“部分”组件在标签中创建我的图表。
当我在标签外显示图表时，它看起来很正常： 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-＆gt; 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>
你知道可能导致这种情况的原因吗？
答案 0 :(得分：0)
我有同样的问题，使用基础“标签”，但使用谷歌饼图。馅饼变得更小，传说不会“分页”，而是一个接一个。 最后我发现，如果我在默认的活动部分选项卡（section class =“active”）中显示图形，则没有问题。发生的是，部分内容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;}
这招就像奇迹一样！