Chart.js canvasプラグインにラベルを追加するには？

Question

素晴らしいプラグインChart.jsを使用していますが、それぞれの割合で表示ラベルの方法を見つけようとしています。だから私はそれをGoogleで検索し、私は、このプルを見つけた：https://github.com/nnnick/Chart.js/pull/35

私はそれをテストするための簡単なフィドルをしましたが、作品はありません：http://jsfiddle.net/marianico2/7ktug/1/

これはコンテンツです：

HTML

<canvas id="canvas" height="450" width="450"></canvas> 

JS

$(document).ready(function() { 
    var pieData = [{ 
     value: 30, 
     color: "#F38630", 
     label: 'HELLO', 
     labelColor: 'black', 
     labelFontSize: '16' 
    }, { 
     value: 50, 
     color: "#E0E4CC" 
    }, { 
     value: 100, 
     color: "#69D2E7" 
    }]; 

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, { 
     labelAlign: 'center' 
    }); 
}); 

---

私はdocumentationでこのに関する情報がない怖いです。

また、グラフの外側にある各部分のラベルを表示する方法を知りたいと思います。線で結ばれています。 highcharts.jsのように。

ちなみに、私が上記のオプションを含むhtml5チャートの代替案をお勧めしたら嬉しいです。 flotプラグインについて聞いたことがありますが、アニメーションはサポートされていません...

詳細が必要な場合はお知らせください。投稿を編集します。

Answer 1

コードを2か所に追加する必要があります。一例として、ドーナツを取る。まず、（元Chart.jsコードを見て、これと比較して）デフォルトにラベル情報を追加します。

chart.Doughnut.defaults = { 
     segmentShowStroke : true, 
     segmentStrokeColor : "#fff", 
     segmentStrokeWidth : 2, 
     percentageInnerCutout : 50, 
     animation : true, 
     animationSteps : 100, 
     animationEasing : "easeOutBounce", 
     animateRotate : true, 
     animateScale : false, 
     onAnimationComplete : null, 
     labelFontFamily : "Arial", 
     labelFontStyle : "normal", 
     labelFontSize : 24, 
     labelFontColor : "#666" 
    }; 

その後ダウンドーナツが描かれている場所に行くと、4つのctxの行を追加します。あなたは、x、y座標でテキストを書くためにそれを使用できるように

animationLoop(config,null,drawPieSegments,ctx); 

    function drawPieSegments (animationDecimal){ 
     ctx.font = config.labelFontStyle + " " + config.labelFontSize+"px " + config.labelFontFamily; 
     ctx.fillStyle = 'black'; 
     ctx.textBaseline = 'middle'; 
     ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200); 

ctx.fillTextコールは、キャンバス上にテキストを配置します。あなたは、この方法で基本ラベルを行うことができるはずです。

http://jsfiddle.net/nCFGL/あなたが凝っが必要な場合は、誰かがCharts.jsのバージョンをフォーク（前述のコードのjsfiddleのJavaScriptのセクション内の行281と772を見て）

と：ここでいじくり回すjsfiddleですツールチップが追加されました。ここではディスカッションhttps://github.com/nnnick/Chart.js/pull/35があり、そのディスカッションの中でフォークされたバージョンへのリンクを見つけることができます。

Answer 2

私はグラフの外側に各領域の値を表示できるように方法を考え出しました。

はまた、私は値の回転を除去し、Iはドーナツ関数内のコードの次の行を追加here

呼びます。 （私はChart.jsファイルから修正された行を貼り付けました）。

var Doughnut = function(data,config,ctx){ 

    var segmentTotal = 0; 

    //In case we have a canvas that is not a square. Minus 10 pixels as padding round the edge. 
    var doughnutRadius = Min([height/2,width/2]) - 15; 
    var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100); 
    //Modified for setting the label values out side the arc 
    var outRadius= doughnutRadius + cutoutRadius/3; 
    var outRadiustop= doughnutRadius + cutoutRadius/5; 
    ...... 
    ...... 
    ...... 

    function drawPieSegments (animationDecimal){ 
    : 
    : 



     if (config.scaleShowValues) { 
       ctx.save();     
       ctx.translate(width/2, height/2); 
       ctx.font = config.scaleFontStyle + ' ' + config.scaleFontSize + 'px ' + config.scaleFontFamily; 
       ctx.textBaselne = 'middle'; 
       var a = (cumulativeAngle + cumulativeAngle + segmentAngle)/2, 
        w = ctx.measureText(data[i].value).width, 
        b = Math.PI/2 < a && a < Math.PI * 3/2; 
       var c = 0 < a && a < Math.PI; 
       if(b){ 
        ctx.textAlign = 'right'; 
       } 
       else{ 
        ctx.textAlign = 'left'; 
       } 
       if(c){ 
        ctx.translate(Math.cos(a) * outRadius +1 , Math.sin(a) * outRadius+1); 

       } 
       else{ 
        ctx.translate(Math.cos(a) * outRadiustop, Math.sin(a) * outRadiustop);  
       } 

       ctx.fillStyle = config.scaleFontColor; 
       //If the segment angle less than 0.2, then the lables will overlap, so hiding it. 
       if(segmentAngle > 0.2){ 
        ctx.fillText(data[i].value,0,0); 

       } 
       ctx.restore(); 
    } 

    ...... 
    ...... 

ここで値は各セクションの外側に表示され、回転されません。

Answer 3

フォークされたバージョンChartNewがあり、この機能をそのまま使用できます。あなたがChartJSを使用する必要がある場合

は、あなたがジャックのソリューション@ のこの改訂版を使用することができます。

Chart.types.Doughnut.extend({ 
    name: "DoughnutAlt", 
    draw: function() { 
     Chart.types.Doughnut.prototype.draw.apply(this, arguments); 
     this.chart.ctx.fillStyle = 'black'; 
     this.chart.ctx.textBaseline = 'middle'; 
     this.chart.ctx.fillText(this.segments[0].value + "%", this.chart.width/2 - 20, this.chart.width/2, 200); 
    } 
}); 

Answer 4

この1つは、文字通り時間と時間を取って、私は実用的なソリューションを見つけました。

https://github.com/nnnick/Chart.js/pull/116

これは私の最終的なコードでした。 masterブランチではなく、みんなフォークということではありません表示されます - 私はあなたがhttps://github.com/Regaddi/Chart.js投稿をそのプルからドーナツ

Chart.types.Doughnut.extend({ 
name: "DoughnutAlt", 
draw: function() { 
    Chart.types.Doughnut.prototype.draw.apply(this, arguments); 
    this.chart.ctx.fillStyle = 'black'; 
    this.chart.ctx.textBaseline = 'middle'; 
    this.chart.ctx.textAlign = 'start'; 
    this.chart.ctx.font="18px Verdana"; 

    var total = 0; 
    for (var i = 0; i < this.segments.length; i++) { 
     total += this.segments[i].value;  
    } 

    this.chart.ctx.fillText(total , this.chart.width/2 - 20, this.chart.height/2, 100); 
    for(var i = 0; i < this.segments.length; i++){ 
     var percentage = ((this.segments[i].value/total) * 100).toFixed(1); 
     if(percentage > 3){ 
      var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle)/2), 
       rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius)/2 + this.segments[i].innerRadius; 
      var x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre); 
      var y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre); 
      this.chart.ctx.textAlign = 'center'; 
      this.chart.ctx.textBaseline = 'middle'; 
      this.chart.ctx.fillStyle = '#fff'; 
      this.chart.ctx.font = 'normal 10px Helvetica'; 
      this.chart.ctx.fillText(percentage , x, y); 
     } 
    } 
} 
});