Bootstrap饼图不显示
问题描述:
我想创建bootstrap饼图,但它没有显示,我也没有收到任何错误。Bootstrap饼图不显示
<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/
谁能告诉我哪里出了问题?
答
这只是一个外部资源的问题。如果您在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复制一些代码时要小心)。