chart.jsで各スライスの円グラフデータ値を表示する方法
PHPページで円グラフを描画するためにChart.jsを使用していますが、各スライス値を表示するツールチップが見つかりました。
しかし、以下の画像のような値を表示したいと思います。 
Chart.jsでこれを行う方法がわかりません。
私を助けてください。
私のJavascriptコード：
function drawPie(canvasId,data,legend){
var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");
var piedata = [];
$.each(data,function(i,val){
piedata.Push({value:val.count,color:val.color,label:val.status});
});
var options =
{
tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
}
var pie = new Chart(ctx).Pie(piedata,options);
if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
}
pHPコード：
printf('<table><tr>');
echo '<td style="text-align: right;"><canvas id="pie-canvas-'
. $canvasId
. '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';
echo '<script type="text/javascript">drawPie('
. $canvasId
. ', '
. $data3
.', '
. $legend
. ');</script>';
私が知っていることから、Chart.JSには円グラフにテキストを描画するのに役立つ機能があるとは思わない。しかし、それはネイティブJavaScriptで自分でできないということではありません。その方法の例を示します。以下は、円グラフの各セグメントにテキストを描画するコードです。
_function drawSegmentValues()
{
for(var i=0; i<myPieChart.segments.length; i++)
{
// Default properties for text (size is scaled)
ctx.fillStyle="white";
var textSize = canvas.width/10;
ctx.font= textSize+"px Verdana";
// Get needed variables
var value = myPieChart.segments[i].value;
var startAngle = myPieChart.segments[i].startAngle;
var endAngle = myPieChart.segments[i].endAngle;
var middleAngle = startAngle + ((endAngle - startAngle)/2);
// Compute text location
var posX = (radius/2) * Math.cos(middleAngle) + midX;
var posY = (radius/2) * Math.sin(middleAngle) + midY;
// Text offside to middle of text
var w_offset = ctx.measureText(value).width/2;
var h_offset = textSize/4;
ctx.fillText(value, posX - w_offset, posY + h_offset);
}
}
_円グラフには_PieChart.segments_に格納されたセグメントの配列があります。これらのセグメントのstartAngleとendAngleを見て、テキストがmiddleAngleになる間の角度を決定できます。次に、その方向に_Radius/2_だけ移動して、ラジアン単位でチャートの中間点に移動します。
上の例では、fillText()で描かれたテキストの位置が右上隅であるため、いくつかの他のクリーンアップ操作が行われ、それを修正するためにいくつかのオフセット値を取得する必要があります。最後に、textSizeは、チャート自体のサイズに基づいて決定されます。チャートが大きくなると、テキストも大きくなります。
少し変更することで、データセットの離散値をグラフ内のパーセンタイル値に変更できます。これを行うには、データセット内のアイテムの合計valueを取得し、このtotalValueを呼び出します。次に、各セグメントで次の操作を実行してパーセントを見つけることができます。
_Math.round(myPieChart.segments[i].value/totalValue*100)+'%';
_ここのセクション_myPieChart.segments[i].value/totalValue_は、グラフでセグメントが占める割合を計算するものです。たとえば、現在のセグメントの値が_50_であり、totalValueが_200_であった場合。その場合、セグメントが占める割合は_50/200 => 0.25_になります。残りはこれを素敵に見せることです。 _0.25*100 => 25_、次に_%_を最後に追加します。整数パーセントのタイルについては、最も近い整数に丸めましたが、精度に問題が生じる可能性があります。さらに精度が必要な場合は、.toFixed(n)を使用して小数点以下の桁数を節約できます。たとえば、必要なときに小数点以下1桁を節約するためにこれを実行できます。
_var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';
_Chart.js 2.0以降では、Chartオブジェクトのデータが変更されました。 Chart.js 2.0+を使用している人のために、以下はHTML5 Canvas fillText()メソッドを使用してパイスライス内にデータ値を表示する例です。コードはドーナツチャートでも機能しますが、唯一の違いはtype: 'pie' 対 type: 'doughnut'チャート作成時。
スクリプト：
Javascript
var data = {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
};
var pieOptions = {
events: false,
animation: {
duration: 500,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
total = dataset._meta[Object.keys(dataset._meta)[0]].total,
mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
start_angle = model.startAngle,
end_angle = model.endAngle,
mid_angle = start_angle + (end_angle - start_angle)/2;
var x = mid_radius * Math.cos(mid_angle);
var y = mid_radius * Math.sin(mid_angle);
ctx.fillStyle = '#fff';
if (i == 3){ // Darker text color for lighter background
ctx.fillStyle = '#444';
}
var percent = String(Math.round(dataset.data[i]/total*100)) + "%";
//Don't Display If Legend is hide or value is 0
if(dataset.data[i] != 0 && dataset._meta[0].data[i].hidden != true) {
ctx.fillText(dataset.data[i], model.x + x, model.y + y);
// Display percent in another line, line break doesn't work for fillText
ctx.fillText(percent, model.x + x, model.y + y + 15);
}
}
});
}
}
};
var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
type: 'pie', // or doughnut
data: data,
options: pieOptions
});
HTML
<canvas id="pieChart" width=200 height=200></canvas>
優れたChart.js必要なことを正確に行うプラグイン： https://github.com/emn178/Chart.PieceLabel.js
@Hung Tranの答えは完璧です。改善として、0の値を表示しないことをお勧めします。5つの要素があり、そのうちの2つが0で、残りの要素に値がある場合、上記のソリューションは0と0％を示します。 0に等しくないチェックでそれをフィルタリングすることをお勧めします！
var val = dataset.data[i]; var percent = String(Math.round(val/total*100)) + "%"; if(val != 0) { ctx.fillText(dataset.data[i], model.x + x, model.y + y); // Display percent in another line, line break doesn't work for fillText ctx.fillText(percent, model.x + x, model.y + y + 15); }
以下の更新されたコード：
var data = {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
};
var pieOptions = {
events: false,
animation: {
duration: 500,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
total = dataset._meta[Object.keys(dataset._meta)[0]].total,
mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
start_angle = model.startAngle,
end_angle = model.endAngle,
mid_angle = start_angle + (end_angle - start_angle)/2;
var x = mid_radius * Math.cos(mid_angle);
var y = mid_radius * Math.sin(mid_angle);
ctx.fillStyle = '#fff';
if (i == 3){ // Darker text color for lighter background
ctx.fillStyle = '#444';
}
var val = dataset.data[i];
var percent = String(Math.round(val/total*100)) + "%";
if(val != 0) {
ctx.fillText(dataset.data[i], model.x + x, model.y + y);
// Display percent in another line, line break doesn't work for fillText
ctx.fillText(percent, model.x + x, model.y + y + 15);
}
}
});
}
}
};
var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
type: 'pie', // or doughnut
data: data,
options: pieOptions
});