如何顯示圓形切片數據，並使用chart.js之

Question

我們可以顯示餅圖切片數據，也tolltip喜歡用chart.js之上面的圖像工具提示在一起嗎？

更新時間：

這是我在PHP頁面代碼。

  printf('<table>'); 
      echo '<tr><td style="text-align: right;"><canvas id="pie-canvas-' 
       . $canvasId 
       . '" width=256px height=257px ></canvas></td><td style="text-align: left;width:360px;" id="legend" class="chart-legend"></td></tr>'; 

      echo '<script type="text/javascript">drawPie(' 
       . $canvasId 
       . ', ' 
       . $data 
       .', ' 
       . $legend 
       . ');</script>'; 
      printf('</table>'); 

printf('<script type="text/javascript" src="extlib/Chart.min.js"></script>'); 
printf('<script type="text/javascript" src="extlib/jquery-min.js"></script>'); 
printf('<script type="text/javascript">'); 
?> 
function drawPie(canvasId, data, legend) 
{ 
//pie chart for machine status 
    var canvas = document.getElementById("pie-canvas-" + canvasId); 
    var ctx = canvas.getContext("2d"); 
    var midX = canvas.width/2; 
    var midY = canvas.height/2; 
    var piedata = []; 

    $.each(data,function(i,val){ 
     piedata.push({value:val.hostStatusCount,color:val.color,label:val.status}); 
    }); 

    Chart.types.Pie.extend({ 
     name: "PieAlt", 
     draw: function(){ 
      Chart.types.Pie.prototype.draw.apply(this, arguments); 
      drawSegmentValues(this) 
     } 
    }); 
    var myPieChart = new Chart(ctx).PieAlt(piedata, { 
     showTooltips: true, 
     tooltipTemplate: "<%= Math.round(circumference/6.283 * 100) %>%" 

    }); 

    var radius = myPieChart.outerRadius; 

    function drawSegmentValues(myPieChart) 
    { 
    //displays segements(number of machines) for each slice of pie in percentage 
     var length = myPieChart.segments.length; 
     var totalValue = 0; 
     for (var i=0; i < length; i++) 
     { 
      totalValue +=myPieChart.segments[i].value; 
     } 
     for(var i=0; i < length; i++) 
     { 
      ctx.fillStyle="black"; 
      var textSize = canvas.width/15; 
      ctx.font= textSize+"px Verdana"; 

      // Get needed variables 
      var value = Math.round(((myPieChart.segments[i].value)/totalValue) * 100); 
      var startAngle = myPieChart.segments[i].startAngle; 
      var endAngle = myPieChart.segments[i].endAngle; 
      var middleAngle = startAngle + ((endAngle - startAngle)/2); 

      // Compute text location 
      var posX = (radius /1.5) * Math.cos(middleAngle) + midX; 
      var posY = (radius/1.5) * Math.sin(middleAngle) + midY; 

      // Text offside by middle 
      var w_offset = ctx.measureText(value).width/2; 
      var h_offset = textSize/4; 

      ctx.fillText(value+"%", posX - w_offset, posY + h_offset); 
     } 
    } 

    //legend for status 
    if(legend) 
     document.getElementById("legend").innerHTML = myPieChart.generateLegend(); 
} 
<? 

當鼠標在從其位置移動在圓形切片的數據。 如何解決這個問題？

Answer 1

擴展圖表和移動你的drawSegmentValues到draw覆蓋內，像這樣

Chart.types.Pie.extend({ 
    name: "PieAlt", 
    draw: function(){ 
    Chart.types.Pie.prototype.draw.apply(this, arguments); 
    drawSegmentValues(this) 
    } 
}); 

然後用PieAlt

var myPieChart = new Chart(ctx).PieAlt(data, { 
    showTooltips: true, 
    tooltipTemplate: "<%= Math.round(circumference/6.283 * 100) %>%" 
}); 

和修改drawSegmentValues功能略有

function drawSegmentValues(myPieChart) 
{ 
    var radius = myPieChart.outerRadius 
    ... 

---

更新

如果你有標籤動設置上下文textAlign和textBaseline性質，像這樣

... 
ctx.font = textSize + "px Verdana"; 
ctx.textAlign = "start"; 
ctx.textBaseline = "bottom"; 
...