6

Necesito mostrar el resultado de la grafica circular encima de esta misma, estas son las options que le envio a mi grafica.

        self.options = {
         title: {
            position : 'top',
            display: true,
            text: 'PERSONAL POR CIUDAD'
        },
           maintainAspectRatio: false,
           responsive: true,
        }
        self.chartDataCity = {
          labels : self.chartLabelCity,
          datasets : [
            {
               backgroundColor: [
                'rgb(69,166,90)',
                'rgb(242,156,17)',
                'rgb(86,193,239)',
                'rgb(221,75,57)',
            ],
              label : "Personal por ciudad",
              data : self.chartDataCity,
            }
          ]
        }
      })
    },

Este es el resultado de la grafica

Este es el resultado de la gr

Esta segunda imagen es un ejemplo de como me gustaria que quede la graifca, los porcentajes encima de la grafica

introducir la descripción de la imagen aquí

5
  • Una encima de otra? no entiendo
    – Srsole
    Commented el 29 ago. 2019 a las 12:42
  • La segnda imagen es un ejemplo de como quiero que quede mi grafica! Commented el 29 ago. 2019 a las 12:43
  • Yo solo se hacerlo cuando hago hover
    – Srsole
    Commented el 29 ago. 2019 a las 12:46
  • AHora mismo funciona cuando desplazo el mouse por la grafica, pero quiero que me muestre los resultados encima de ella, sin necesidad de pasar el mouse, me podrias recomendar un articulo el cual pueda estar la posible solución? Commented el 29 ago. 2019 a las 12:48
  • a ver si te sirve mi solucion
    – Srsole
    Commented el 29 ago. 2019 a las 13:12

2 respuestas 2

1

Para esto existe un plugin de chartjs el cual te ayuda bastante

https://v2_0_0--chartjs-plugin-datalabels.netlify.app/samples/advanced/custom-labels.html

Un saludo.

1
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – Israel-ICM
    Commented el 8 jun. 2022 a las 17:28
0

Prueba con esto:

animation: {
  onComplete: function () {
    var chartInstance = this.chart;
    var ctx = chartInstance.ctx;
    console.log(chartInstance);
    var height = chartInstance.controller.boxes[0].bottom;
    ctx.textAlign = "center";
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      Chart.helpers.each(meta.data.forEach(function (bar, index) {
        ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y) / 2));
      }),this)
    }),this);
  }
}

yo lo tengo en un gráfico de barras, pero te sera fácil usarlo para un PIE

Lo que hacemos es usar el objeto helpers para escribir texto.

Le puedes dar una clase al texto para formatearlo a tu gusto.

Es en esta linea de código que puedes hacerlo:

ctx.fillText(TEXTO)

La funcion ctx.fillText() tiene 2 parametros, el primero para el texto, el segundo para la altura.

Espero te sirva, suerte.

2
  • Con tu solución ya me muetras los datos en la grafica, pero todos los numeros quedan encima de otros y no se ve muy bien, como podria ajustar la posición? Commented el 29 ago. 2019 a las 13:16
  • justo despues de "ctx.fillText(dataset.data[index], " veras que pone heigth
    – Srsole
    Commented el 29 ago. 2019 a las 13:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.