我正在使用 Chart.js 在我的 php 页面中绘制饼图。我发现工具提示显示了每个切片的值。
[!在此输入图片描述][1]
但我希望像下图一样显示这些值。 [!此处输入图片描述][2]
我不知道如何使用 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>';
[!在此输入图片描述][3]
对于 Chart.js 2.0 及以上版本,图表对象数据已发生变化。对于使用 Chart.js 2.0 以上版本的用户,下面是一个使用 HTML5 Canvas fillText()
方法显示饼片内部数据值的示例。该代码同样适用于甜甜圈图表,唯一的区别是创建图表时使用了 type: 'pie'
,而不是 type: 'doughnut'
。
脚本:
语言
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>
[jsFiddle][1]
据我所知,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
(文本大小)是根据图表本身的大小确定的,图表越大,文本就越大。
[小提琴示例](
)只要稍加修改,就可以将数据集的离散数值转换为图表中的百分位数。要做到这一点,需要得到数据集中各项目的总 "值",将其称为 "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 + '%';
[带小数点的百分位数小游戏示例](
2/)[用整数表示百分位数的小技巧示例](
1/)@Hung Tran'答案的效果非常好。如果您有 5 个元素,其中 2 个元素的值为 0,其余元素的值为 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); // 在另一行显示百分比,换行对 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
});