chart.js圖例不適用於餅圖

我在寫一個小應用程序。我使用chart.js繪製餅圖，我能夠成功繪製餅圖。但不知何故傳說不起作用。我可否知道我要去哪裏？我的代碼如下所示：chart.js圖例不適用於餅圖

代碼：

<body onload = onLoading()> 
<div class="container"> 
<div class="col-xs-12"> 

    <div class="page-header"> 
     <h3>Test</h3>  
    </div> 

    <div class="carousel slide" id="myCarousel"> 
     <nav> 
      <ul class="control-box pager"> 
       <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li> 
       <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li> 
      </ul> 
     </nav> 
     <!-- /.control-box --> 
     <div class="carousel-inner"> 
      <div class="item active"> 

         <div class="col-sm-6"> 
          <div class="fff"> 
           <div class="thumbnail" id="tmp"> 
            <h3>A</h3><canvas id="i1"></canvas> 
           </div> 

          </div> 
         </div> 
         <div class="col-sm-6"> 
          <div class="fff"> 
           <div class="thumbnail"> 
            <h3>B</h3><canvas id="i2"></canvas> 
           </div> 

          </div> 
         </div> 
         <div class="col-sm-6"> 
          <div class="fff"> 
           <div class="thumbnail"> 
            <h3>C</h3><canvas id="i3"></canvas> 
           </div> 

          </div> 
         </div> 
         <div class="col-sm-6"> 
          <div class="fff"> 
           <div class="thumbnail"> 
            <h3>D</h3><canvas id="i4"></canvas> 
           </div> 

          </div> 
         </div> 

       </div><!-- /Slide1 --> 

     </div> 




    </div><!-- /#myCarousel --> 

</div><!-- /.col-xs-12 -->   

</div><!-- /.container --> 


<script type="text/javascript"> 
// Carousel Auto-Cycle 
    $(document).ready(function() { 
    $('.carousel').carousel({ 
     interval: 6000 
    }) 
    }); 

    function onLoading() 

{   

var pieData = [ 
    { 
     value: 25, 
     label: 'Java', 
     color: "#F38630" 
    }, 
    { 
     value: 10, 
     label: 'Scala', 
     color: "#F34353", 
    }, 
    { 
     value: 30, 
     label: 'PHP', 
     color: '#B276B2 ' 
    }, 
    { 
     value : 35, 
     label: 'HTML', 
     color: '#5DA5DA' 
    } 
]; 
var context = document.getElementById('i1').getContext('2d'); 
var skillsChart = new Chart(context).Pie(pieData); 
document.getElementById('i1').innerHTML = skillsChart.generateLegend(); 

context = document.getElementById('i2').getContext('2d'); 
skillsChart = new Chart(context).Pie(pieData); 
document.getElementById('i2').innerHTML = skillsChart.generateLegend(); 

context = document.getElementById('i3').getContext('2d'); 
skillsChart = new Chart(context).Pie(pieData); 
document.getElementById('i3').innerHTML = skillsChart.generateLegend(); 

context = document.getElementById('i4').getContext('2d'); 
skillsChart = new Chart(context).Pie(pieData); 
document.getElementById('i4').innerHTML = skillsChart.generateLegend(); 
} 

</script> 
</body>

來源

2015-10-18 sklearning

圖例必須添加到一個元件從畫布元件分離。所以，你需要的是像

... 
<h3>A</h3><canvas id="i1"></canvas> 
<div id="i1-legend"></div> 
...

與腳本

document.getElementById('i1-legend').innerHTML = skillsChart.generateLegend();

此外，你可能需要CSS樣式是正確的，像這樣

ul.pie-legend { 
    list-style: none; 
} 
ul.pie-legend span { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin-right: 10px; 
}

來源

2015-10-18 09:52:59 potatopeelings

chart.js圖例不適用於餅圖

回答

相關問題