javascript - Zurb 披萨饼图越来越大

Question

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

这是主要代码:

<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 在 head 下:

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

它是这样的: 编辑: 好吧，显然当我将饼图的 ID 命名为“ donut ”时，出于某种原因它起作用了。我通过更改 ID 对其进行了测试，现在似乎只有 donut 可以工作，但这对我不起作用，因为我有多个饼图需要显示。

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 '在您的数据选项代码中