如何在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: "%", } var pie = new Chart(ctx).Pie(piedata,options); if(legend)document.getElementById("legend").innerHTML = pie.generateLegend(); } 

php代码：

 printf(''); echo ''; echo 'drawPie(' . $canvasId . ', ' . $data3 .', ' . $legend . ');'; 

Answer 1

据我所知，我不相信Chart.JS有任何function可以帮助在饼图上绘制文本。 但这并不意味着你不能在本机JavaScript中自己做。 我将举例说明如何做到这一点，下面是饼图中每个段的绘图文本的代码：

 function drawSegmentValues() { for(var i=0; i 

饼图有一个存储在endAngle的段数组，我们可以查看这些段的startAngle和endAngle ，以确定文本为middleAngle之间的角度。 然后我们将在Radius/2那个方向上移动到弧度图表的中间点。

在上面的示例中，完成了一些其他清理操作，由于fillText()绘制的文本位置是右上角，我们需要获取一些偏移值来纠正它。 最后textSize是根据图表本身的大小确定的，图表越大文本越大。

小提琴示例

---

通过稍微修改，您可以将数据集的离散数值更改为图表中的百分位数。 要执行此操作，请获取数据集中项目的总值，并调用此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)来保存小数位。 例如，我们可以在需要时保存一个小数位：

 var value = myPieChart.segments[i].value/totalValue*100; if(Math.round(value) !== value) value = (myPieChart.segments[i].value/totalValue*100).toFixed(1); value = value + '%'; 

小提琴百分位数的小提琴示例

小提琴的百分位示例

Answer 2

对于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)) + "%"; 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

的jsfiddle

Answer 3

我找到了一个出色的Chart.js插件，可以完全满足您的需求： https ： //github.com/emn178/Chart.PieceLabel.js

Answer 4

您可以使用Chart.js的PieceLabel插件。

{pieceLabel：{mode：’percentage’，precision：2}}

演示 | 文档

Answer 5

@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 }); 

Answer 6

使用Chartjs最简单的方法。 只需在选项中添加以下行：

 pieceLabel: { fontColor: '#000' } 

祝你好运