Question

所以我试图从Zurb那里做example，但是当我创建饼图时（即使我复制并粘贴他们必须显示示例的代码），图表也变得疯狂了试图填满整个页面。我知道它试图占据它所在元素的整个宽度，但是当我调整元素的宽度时，图表只会缩小尺寸，但不会向上移动，所以最终，它仍然占据了整个空间。

这是主要代码：

<div style="margin-left: 15px">
    <h4>Points: 3.75</h4>
    <span>Rank 4</span>

    <div class="progress success basic">
        <span class="meter" style="width: 97%">Top: 97%</span>
    </div>
    <span>Tutored 7 times</span>
    <span>Missed 2 tutoring sessions</span>

    <div class="row graphs">
        <div class="large-6 columns">
            <div class="row">
                <div class="large-2 small-4 columns">
                    <ul data-pie-id="example1">
                        <li data-value="60">Water Buffalo</li>
                        <li data-value="20">Bison</li>
                        <li data-value="12">Sheep</li>
                        <li data-value="32">Goat</li>
                        <li data-value="50">Shetland Pony</li>
                    </ul>
                </div>
                <div class="large-10 small-8 columns">
                    <div id="example1"></div>
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <div class="row">
                <div class="large-2 small-4 columns">
                    <ul data-pie-id="example2" data-options="{&quot;donut&quot;:&quot;true&quot;}">
                        <li data-value="60">Pepperoni</li>
                        <li data-value="20">Sausage</li>
                        <li data-value="12">Cheese</li>
                        <li data-value="32">Mushroom</li>
                        <li data-value="50">Chicken</li>
                        <li data-value="24">Other</li>
                    </ul>
                </div>
                <div class="large-10 small-8 columns">
                    <div id="example2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

我的css在头下：

<link href="/res/css/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css"/>

页面底部的js：

<script src="/res/js/pizza.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/res/js/vendor/snapsvg.min.js"></script>

这是它的样子： Image of how the page gets rendered 编辑：好的，显然当我将饼图的ID命名为“甜甜圈”时，它的作用是出于某种原因。我通过更改ID来测试它，现在只有甜甜圈似乎可以正常工作，但这对我来说不起作用，因为我需要显示多个饼图。

Edit2：似乎添加样式max-height: 480px似乎是一个临时修复。

Answer 1

` 得分：3.75 等级4

<div class="progress success basic">
    <span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>

<div class="row graphs">
    <div class="large-6 columns">
        <div class="row">
            <div class="large-2 small-4 columns">
                <ul data-pie-id="example1">
                    <li data-value="60">Water Buffalo</li>
                    <li data-value="20">Bison</li>
                    <li data-value="12">Sheep</li>
                    <li data-value="32">Goat</li>
                    <li data-value="50">Shetland Pony</li>
                </ul>
            </div>
            <div class="large-10 small-8 columns">
                <div id="example1"></div>
            </div>
        </div>
    </div>
    <div class="large-6 columns">
        <div class="row">
            <div class="large-2 small-4 columns">
                <ul data-pie-id="example2" data-options="{&quot;donut&quot;:&quot;true&quot;}">
                    <li data-value="60">Pepperoni</li>
                    <li data-value="20">Sausage</li>
                    <li data-value="12">Cheese</li>
                    <li data-value="32">Mushroom</li>
                    <li data-value="50">Chicken</li>
                    <li data-value="24">Other</li>
                </ul>
            </div>
            <div class="large-10 small-8 columns">
                <div id="example2"></div>
            </div>
        </div>
    </div>
</div>

' donut'位于数据选项的代码中

Answer 2

你的css课程＆＃39;大10小8列＆＃39;在pizza.css中没有定义，也许你需要另一个文件，如：foundation.css。

如果您不想添加该大文件，请尝试替换或仅创建新的css类

<div class="large-10 small-8 columns">
   <div id="example1"></div>
</div>

通过

<div style="width: 200px; height: 200px;">
    <div id="example1"></div>
</div>

或您想要的尺寸。

Zurb Pizza Pie图变得越来越大

2 个答案: