2017-10-10 392 views
0

我想创建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/

谁能告诉我哪里出了问题?

回答

2

这只是一个外部资源的问题。如果您在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复制一些代码时要小心)。