Te traemos la contestación a esta cuestión, o por lo menos eso deseamos. Si presentas inquietudes dínoslo, para nosotros será un placer responderte
Solución:
Ninguna de las otras respuestas cambia el tamaño del texto según la cantidad de texto y el tamaño de la dona. Aquí hay una pequeña secuencia de comandos que puede usar para colocar dinámicamente cualquier cantidad de texto en el medio, y automáticamente cambiará su tamaño.
Ejemplo: http://jsfiddle.net/kdvuxbtj/
Se necesitará cualquier cantidad de texto en el tamaño de la rosquilla perfecto para la rosquilla. Para evitar tocar los bordes, puede establecer un acolchado lateral como un porcentaje del diámetro del interior del círculo. Si no lo configura, el valor predeterminado será 20. También puede especificar el color, la fuente y el texto. El complemento se encarga del resto.
El código del complemento comenzará con un tamaño de fuente base de 30 px. A partir de ahí, comprobará el ancho del texto y lo comparará con el radio del círculo y lo cambiará de tamaño en función de la relación entre el ancho del círculo y el texto.
Tiene un tamaño de fuente mínimo predeterminado de 20px. Si el texto excede los límites del tamaño de fuente mínimo, se ajustará al texto. La altura de línea predeterminada al envolver el texto es de 25 px, pero puede cambiarla. Si establece el tamaño de fuente mínimo predeterminado en false, el texto se volverá infinitamente pequeño y no se ajustará.
También tiene un tamaño de fuente máximo predeterminado de 75 px en caso de que no haya suficiente texto y las letras sean demasiado grandes.
Este es el código del complemento
Chart.pluginService.register(
beforeDraw: function(chart)
if (chart.config.options.elements.center) 25;
var wrapText = false;
if (minFontSize === undefined)
minFontSize = 20;
if (minFontSize && fontSizeToUse < minFontSize)
fontSizeToUse = minFontSize;
wrapText = true;
// Set font settings to draw it correctly.
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = fontSizeToUse + "px " + fontStyle;
ctx.fillStyle = color;
if (!wrapText)
ctx.fillText(txt, centerX, centerY);
return;
var words = txt.split(' ');
var line = '';
var lines = [];
// Break words up into multiple lines if necessary
for (var n = 0; n < words.length; n++)
var testLine = line + words[n] + ' ';
var metrics = ctx.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > elementWidth && n > 0)
lines.push(line);
line = words[n] + ' ';
else
line = testLine;
// Move the center up depending on line height and number of lines
centerY -= (lines.length / 2) * lineHeight;
for (var n = 0; n < lines.length; n++)
ctx.fillText(lines[n], centerX, centerY);
centerY += lineHeight;
//Draw text in center
ctx.fillText(line, centerX, centerY);
);
Y usa las siguientes opciones en su objeto gráfico
options:
elements:
center:
text: 'Red is 2/3 the total numbers',
color: '#FF6384', // Default is #000000
fontStyle: 'Arial', // Default is Arial
sidePadding: 20, // Default is 20 (as a percentage)
minFontSize: 20, // Default is 20 (in px), set to false and text will not wrap.
lineHeight: 25 // Default is 25 (in px), used for when text wraps
Gracias a @Jenna Sloan por su ayuda con las matemáticas utilizadas en esta solución.
Aquí se muestra un ejemplo limpio y combinado de las soluciones anteriores: receptivo (intente cambiar el tamaño de la ventana), admite la autoalineación de la animación, admite información sobre herramientas
https://jsfiddle.net/cmyker/u6rr5moq/
Chart.types.Doughnut.extend(
name: "DoughnutTextInside",
showTooltip: function()
this.chart.ctx.save();
Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
this.chart.ctx.restore();
,
draw: function()
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
var width = this.chart.width,
height = this.chart.height;
var fontSize = (height / 114).toFixed(2);
this.chart.ctx.font = fontSize + "em Verdana";
this.chart.ctx.textBaseline = "middle";
var text = "82%",
textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
textY = height / 2;
this.chart.ctx.fillText(text, textX, textY);
);
var data = [
value: 30,
color: "#F7464A"
,
value: 50,
color: "#E2EAE9"
,
value: 100,
color: "#D4CCC5"
,
value: 40,
color: "#949FB1"
,
value: 120,
color: "#4D5360"
];
var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d')).DoughnutTextInside(data,
responsive: true
);
ACTUALIZACIÓN 17.06.16:
Misma funcionalidad pero para la versión 2 de chart.js:
https://jsfiddle.net/cmyker/ooxdL2vj/
var data =
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
]
;
Chart.pluginService.register(
beforeDraw: function(chart)
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
);
var chart = new Chart(document.getElementById('myChart'),
type: 'doughnut',
data: data,
options:
responsive: true,
legend:
display: false
);
Tienes que modificar el código como: en chart.Doughnut.defaults
labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"
y luego en función drawPieSegments
ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);
Vea este tirón: https://github.com/nnnick/Chart.js/pull/35
aquí hay un violín http://jsfiddle.net/mayankcpdixit/6xV78/ implementando el mismo.
Sección de Reseñas y Valoraciones
Recuerda que puedes optar por la opción de comentar si chocaste tu conflicto a tiempo.