Saltar al contenido

¿Cómo agregar texto dentro del gráfico de anillos usando Chart.js?

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/

Donut con texto dinámico en el medio

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.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *