4

Estoy usando vue a través de blade de PHP usando el vue-inline-template; uso chart.js mediante canvas. Estoy tratando de sacar el porcentaje para que se muestre en la gráfica. Pero, si calculo normalmente con (4/100)*row.cantidad*100, me da el porcentaje pero quisiera saber si hay una manera de mostrar el símbolo de porcentaje después de la cantidad.

  Vue.component('graficas', {
            data() {
                return {
                    regiones: [],
                    totalRegion: [],
                }
            },
            mounted() {
                this.loadPieGrafica()
            },
            methods: {
                loadPieGrafica: function(){
                this.$http.get('/calidad/GraficaNoConformidad/zona').then(response => {
                    
                    this.totalRegion = response.data.data.map(row => {
                        //return (4/100)*row.cantidad*100
                        return row.cantidad
                    })

                    this.regiones = _.uniq(response.data.data.map(row => row.region))

                    this.renderChart2()
                })
            },
            renderChart2(){
                var ctx = document.getElementById("pieGrafica");
                var pieGrafica = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: this.regiones, 
                    datasets: [{
                        data: this.totalRegion,
                        backgroundColor: ['#99FF99','#66CC99','#87CEEB','#BEBEBE'],
                        borderColor: ['#99FF99','#66CC99','#87CEEB','#BEBEBE'],
                        borderWidth: 1
                    }]
                },
                 options: {
                    cutoutPercentage: 0,
                    responsive: true,
                   }
                });
            },
    
        const app = new Vue({
            el: "#app",
        });
1
  • 1
    Si todo el texto está en negritas, nada resalta, pero se hace pesado de leer. Edité tu pregunta para corregir la mala ortografía :(, y además quité las negritas. Si quieres resaltar algo, coloca solo lo que quieras resaltar en negrita. Un saludo.
    – jachguate
    Commented el 27 abr. 2021 a las 0:57

1 respuesta 1

1

Pues solo con concatenar el símbolo seria mas que suficiente por ejemplo:

this.totalRegion = response.data.data.map(row => {
  return ((4/100)*row.cantidad*100) + ' %'
});

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.