Chart.jsの値を表示する円グラフの部分

Question

ウェブページのデータを視覚化するためのchart.js（バージョン2.7.0）円グラフを使用します。私は一般的に動作する円グラフを使用する必要があります。サンプルページのhttp://www.chartjs.org/samples/latest/charts/pie.htmlにあるように、円グラフの部分にはマウスの上にしか表示されないデータはありません。私はそれをパーツ内に直接表示させたいと思っています。私はドキュメントでこれについて何も見つけられません。これは一般的に可能ですか？はいの場合、これをどのように達成できますか？

Answer 1

はい、可能です。これは、 - Chart.PieceLabel.jsというChart.jsプラグインを使用して達成できます。 hereを参照してください、のユースケースこのプラグインの詳細とそれを学ぶために

var chart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
     data: [30, 40, 25], 
 
     backgroundColor: 'rgba(0,119, 220, 0.2)' 
 
     }] 
 
    }, 
 
    options: { 
 
     pieceLabel: { 
 
     render: 'value' //show values 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
 

 
<canvas id="ctx"></canvas>

：ここ

は、基本的な例です。