插入百分比 charts.js 甜甜圈
Inserting percentage charts.js doughnut
我正在使用 charts.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);
});
我的canvas:
<canvas id="myChart" width="264px"></canvas>
甜甜圈图以 canvas 为中心,因此您可以这样计算甜甜圈的中心:
// 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;
然后你可以告诉 canvas 以 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);
但是在绘制居中文本之前必须等待所有动画完成。
为此,您必须告诉 ChartJS 您希望在它完成动画时触发回调函数。您可以通过设置图表选项的 onAnimationComplete
属性 来设置回调:
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
responsive : true,
// when ChartJS has completed all animations then call the addText function
onAnimationComplete: addText
});
这是一个将所有内容放在一起的演示:
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>
Draw 方法为图表创建 canvas。在悬停时调用绘制方法以重新创建图表并显示工具提示。文本消失是因为在 draw 方法中没有显示文本的代码,因为我们在 API 之外手动添加文本。
您可以通过扩展图表来实现这一点。在此处关注 Docs。
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;
示例:jsfiddle
纯css解决方案
.overview-total {
position: relative;
.overview-num{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
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>
我认为接受的答案不起作用,至少对我而言。这是我的解决方案:
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);
我正在使用 charts.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);
});
我的canvas:
<canvas id="myChart" width="264px"></canvas>
甜甜圈图以 canvas 为中心,因此您可以这样计算甜甜圈的中心:
// 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;
然后你可以告诉 canvas 以 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);
但是在绘制居中文本之前必须等待所有动画完成。
为此,您必须告诉 ChartJS 您希望在它完成动画时触发回调函数。您可以通过设置图表选项的 onAnimationComplete
属性 来设置回调:
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
responsive : true,
// when ChartJS has completed all animations then call the addText function
onAnimationComplete: addText
});
这是一个将所有内容放在一起的演示:
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>
Draw 方法为图表创建 canvas。在悬停时调用绘制方法以重新创建图表并显示工具提示。文本消失是因为在 draw 方法中没有显示文本的代码,因为我们在 API 之外手动添加文本。
您可以通过扩展图表来实现这一点。在此处关注 Docs。
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;
示例:jsfiddle
纯css解决方案
.overview-total {
position: relative;
.overview-num{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
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>
我认为接受的答案不起作用,至少对我而言。这是我的解决方案:
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);