Javascript 如何在chart.js中显示每个切片的饼图数据值
我正在使用Chart.js在php页面中绘制饼图。我发现工具提示显示了每个切片的值。Javascript 如何在chart.js中显示每个切片的饼图数据值,javascript,php,jquery,charts,Javascript,Php,Jquery,Charts,我正在使用Chart.js在php页面中绘制饼图。我发现工具提示显示了每个切片的值。 但我希望显示这些值,如下图所示 我不知道如何使用chart.js实现这一点 请帮帮我 我的Javascript代码: function drawPie(canvasId,data,legend){ var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d"); var piedata = []; $.each(data,
但我希望显示这些值,如下图所示 我不知道如何使用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();
}
函数drawPie(画布ID、数据、图例){
var ctx=$(“#饼图画布-”+canvasId).get(0).getContext(“2d”);
var piedata=[];
$。每个(数据、函数(i、val){
push({value:val.count,color:val.color,label:val.status});
});
var期权=
{
ToolTiptTemplate:“%”,
}
var pie=新图表(ctx).pie(piedata,选项);
if(图例)document.getElementById(“图例”).innerHTML=pie.generateGend();
}
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>';
printf(“”);
回声';
回音“drawPie('
$canvasId
. ', '
$data3
.', '
.$legend
. ');';
据我所知,我不相信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);
}
}
这里的myPieChart.segments[i].value/totalValue
部分计算了该段在图表中所占的百分比。例如,如果当前段的值为50
,而总值为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 + '%';
对于Chart.js 2.0及以上版本,图表对象数据已更改。对于使用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
});
var数据={
数据集:[{
数据:[
11,
16,
7.
3.
14
],
背景颜色:[
“#FF6384”,
“#4BC0C0C0”,
“#FFCE56”,
“#E7E9ED”,
“#36A2EB”
],
标签:“我的数据集”//用于图例
}],
标签:[
“红色”,
“绿色”,
“黄色”,
“灰色”,
“蓝色”
]
};
变量选项={
事件:错误,
动画:{
持续时间:500,
放松:“放松夸脱”,
onComplete:函数(){
var ctx=this.chart.ctx;
ctx.font=Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily,'normal',Chart.defaults.global.defaultFontFamily);
ctx.textAlign='中心';
ctx.textb基线='底部';
this.data.datasets.forEach(函数(数据集){
对于(var i=0;i
HTML
@Hung Tran的答案完美无瑕。作为改进,我建议不要显示0的值。假设你有5个元素,其中2个是0,其余的有值,上面的解决方案将显示0和0%。最好用不等于0的检查将其过滤掉 更新代码如下:
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
});
var数据={
数据集:[{
数据:[
11,
16,
7.
3.
14
],
背景颜色:[
“#FF6384”,
“#4BC0C0C0”,
“#FFCE56”,
“#E7E9ED”,
“#36A2EB”
],
标签:“我的数据集”//用于图例
}],
标签:[
“红色”,
“绿色”,
“黄色”,
“灰色”,
“蓝色”
]
};
变量选项={
事件:错误,
动画:{
持续时间:500,
放松:“放松夸脱”,
onComplete:函数(){
var ctx=this.chart.ctx;
ctx.font=Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily,'normal',Chart.defaults.global.defaultFontFamily);
ctx.textAlign='中心';
ctx.textb基线='底部';
this.data.datasets.forEach(函数(数据集){
对于(var i=0;i<canvas id="pieChart" width=200 height=200></canvas>
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
});
{ pieceLabel: { mode: 'percentage', precision: 2 } }
pieceLabel: {
fontColor: '#000'
}
var pOptions = {
onAnimationProgress: drawSegmentValues
};
var pieChart = new Chart(pieChartCanvas, {
type: 'pie', // or doughnut
data: data,
options: pOptions
});