Zurb 比萨饼图变得巨大

Posted 2023-02-19

【中文标题】Zurb 比萨饼图变得巨大

【英文标题】：Zurb Pizza Pie chart getting enormous

【发布时间】：2014-08-28 07:30:31

【问题描述】：

所以我尝试从 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>

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

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

【问题讨论】：

在这里使用 Morris.js 和 Foundation 时遇到了类似的问题。任何运气来解决？ @穆哈塔希姆

@Benco 从那天起我发现的唯一修复就是临时修复。我切换到了 Google 的饼图 API，因为我放弃了尝试找出问题所在。

能否请您发布图表的包装元素的 css 类？

【参考方案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' 在您的数据选项中的代码中

【讨论】：

也可以是 CSS 中的 padding 或 margin

【参考方案2】：

pizza.css 中未定义您的 css 类“大 10 小 8 列”，也许您需要另一个文件，例如：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>

或者你想要的尺寸。