2017-10-10 124 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複製一些代碼時要小心)。