Javascript 插入百分比 charts.js 甜甜圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28499475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inserting percentage charts.js doughnut
提问by Buendiadas
i'm, using charts.js librarie and would like to know how could I add some mark to the hole of a doughnut chart (sth like a percentage)-
我正在使用 charts.js 库，想知道如何在圆环图的孔中添加一些标记（例如百分比）-
My js
我的js
jQuery(document).ready(function(){
var data = [
{
value: 5,
color:"#A1638C",
highlight: "#BF7AAF",
label: "Días Completados 1/21"
},
{
value: 95,
color: "#07659A",
highlight: "#4190BA",
label: "Días pendientes 20/21"
},
]
var ctx = jQuery("#myChart").get(0).getContext("2d");
var myDoughnutChart = new Chart(ctx).Doughnut(data);
});
My canvas:
我的画布：
<canvas id="myChart" width="264px"></canvas>
回答by markE
The donut chart is centered in the canvas, so you can calculate the center of the donut like this:
甜甜圈图在画布中居中，因此您可以像这样计算甜甜圈的中心：
// get the canvas element and its context
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
// calculate the center of the canvas (cx,cy)
var cx=canvas.width/2;
var cy=canvas.height/2;
Then you can tell canvas to draw text vertically & horizontally centered around cx,cy like this:
然后你可以告诉画布以 cx,cy 为中心垂直和水平地绘制文本，如下所示：
// horizontally align text around the specified point (cx)
ctx.textAlign='center';
// vertically align text around the specified point (cy)
ctx.textBaseline='middle';
// draw the text
ctx.font='14px verdana';
ctx.fillStyle='black';
ctx.fillText("Text Here",cx,cy);
But you must wait for any animations to complete before drawing your centered text.
但是在绘制居中文本之前，您必须等待任何动画完成。
To do that you must tell ChartJS that you want a callback function triggered when it completes its animation. You can set the callback by setting the onAnimationCompleteproperty of the chart options:
为此，您必须告诉 ChartJS 您希望在动画完成时触发回调函数。您可以通过设置onAnimationComplete图表选项的属性来设置回调：
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
responsive : true,
// when ChartJS has completed all animations then call the addText function
onAnimationComplete: addText
});
Here's a demo putting it all together:
这是一个将所有内容放在一起的演示：
var doughnutData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function() {
var canvas = document.getElementById("chart-area");
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
onAnimationComplete: addText
});
};
var myDoughnutChart = new Chart(ctx).Doughnut(data);
var myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
onAnimationComplete: addText
});
function addText() {
var canvas = document.getElementById("chart-area");
var ctx = document.getElementById("chart-area").getContext("2d");
var cx = canvas.width / 2;
var cy = canvas.height / 2;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '14px verdana';
ctx.fillStyle = 'black';
ctx.fillText("Text Here", cx, cy);
}body {
padding: 10px;
margin: 0;
}
#canvas-holder {
width: 30%;
}
canvas {
border: 1px solid red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500" />
</div>回答by Debasis Panda
Draw method creates the canvas for chart. On hover draw method is called to re-create the chart and show the tool-tip. Text disappears because there is no code to show text inside draw method as we are adding text manually outside of API.
Draw 方法为图表创建画布。调用悬停绘制方法以重新创建图表并显示工具提示。文本消失是因为我们在 API 之外手动添加文本时，draw 方法中没有显示文本的代码。
You can achieve this by extending the chart. Follow Docshere.
您可以通过扩展图表来实现这一点。在此处关注文档。
Following is the example of adding total records at the centre of the doughnut chart.
以下是在圆环图中心添加总记录的示例。
Chart.defaults.derivedDoughnut = Chart.defaults.doughnut;
var customDoughnut = Chart.controllers.doughnut.extend({
draw: function(ease) {
Chart.controllers.doughnut.prototype.draw.apply(this, [ease]);
var width = this.chart.chart.width,
height = this.chart.chart.height;
var total = this.getMeta().total;
var fontSize = (height / 114).toFixed(2);
var ctx = this.chart.chart.ctx;
ctx.font = fontSize + "em Verdana";
ctx.textBaseline = "middle";
var text = total,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
}
});
Chart.controllers.derivedDoughnut = customDoughnut;
Example: jsfiddle
示例：jsfiddle
回答by Awais
A pure css solution
纯css解决方案
.overview-total {
position: relative;
.overview-num{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
Html
html
<div class="overview-total">
<span class="overview-num">140</span>
<canvas baseChart class="chart-size" width="300" height="180"
[plugins]="doughnutChartPluginsSo"
[colors]="doughnutChartColorsSo"
[data]="doughnutChartDataSo"
[labels]="doughnutChartLabelsSo"
[chartType]="doughnutChartTypeSo"
[options]="doughnutChartOptionsSo"></canvas>
</div>
回答by Victor
I think the accepted answer does not work, at least for me. Here is my solution:
我认为接受的答案不起作用，至少对我而言。这是我的解决方案：
let canvas = document.getElementById('chart-area');
let ctx = canvas.getContext('2d');
let perc = 25;
const config = {
type: 'doughnut',
data: {
datasets: [{
data: [
perc,
100-perc
],
backgroundColor: [
window.chartColors.green,
window.chartColors.gray
]
}]
},
options: {
responsive: true,
animation: {
animateScale: true,
animateRotate: true,
onComplete : function() {
var cx = canvas.width / 2;
var cy = canvas.height / 2;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '16px verdana';
ctx.fillStyle = 'black';
ctx.fillText(perc+"%", cx, cy);
}
},
}
};
new Chart(ctx, config);
