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",
});