Question

我正在尝试创建引导饼图，但它没有显示，我没有收到任何错误。

<script type="text/javascript" src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
          <ul data-pie-id="svg">
            <li data-value="60">Water Buffalo (60)</li>
            <li data-value="20">Bison (20)</li>
            <li data-value="12">Sheep (12)</li>
            <li data-value="32">Goat (32)</li>
            <li data-value="50">Shetland Pony (50)</li>
          </ul>
        </div>
        <div class="col-md-3">
          <div id="svg"></div>
        </div>
        <div class="col-md-3">
          <ul data-pie-id="my-cool-chart" data-options='{"donut": "true"}'>
              <li data-value="36">Pepperoni</li>
              <li data-value="14">Sausage</li>
              <li data-value="8">Cheese</li>
              <li data-value="11">Mushrooms</li>
              <li data-value="7">Chicken</li>
              <li data-value="24">Other</li>
            </ul>

        </div>
        <div class="col-md-3">
            <div id="my-cool-chart"></div>
        </div>
    </div>
</div>

这是我的例子：https://jsfiddle.net/uawcr1a3/

谁能告诉我出了什么问题？

Answer 1

这只是外部资源的问题。如果您在HTML部分中添加此脚本（下面）：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

有效。这可能是因为一些冲突（所以当你从bootsnipp复制一些代码时要小心）。

Bootstrap饼图未显示

1 个答案: