JavaScript - Quiero que se vea el total de cada barra(permanentemente) en mi grafico en JS

 
Vista:

Quiero que se vea el total de cada barra(permanentemente) en mi grafico en JS

Publicado por Sebastian Riveros (2 intervenciones) el 06/12/2021 01:53:20
para generar el grafico, se hacen llamadas de distintas paginas, como podrán apreciar, este es el cuerpo de js y quería saber como puedo hacer para que se muestre la cantidad al final de cada barra, pero en estos casos la cantidad se coloca cuando coloco el mouse sobre esta, yo quiero que esta este permanentemente en el grafico, coloque o no el mouse sobre esta, disculpen la molestia.

function index() {
this.ini = function () {
console.log("Iniciando...");
this.getDatosGraficas();
}

this.getDatosGraficas = function () {
$.ajax({
statusCode: {
404: function () {
console.log("Esta página no existe");
}
},
url: 'servidor.php',
method: 'POST',
data: {
rq: "1"
}
}).done(function (datos) {
//La lógica
if (datos != '') {
let etiquetas = new Array();
let tPrecio = new Array();
let coloresP = new Array();
var jDatos = JSON.parse(datos);

var tablaDatos = document.createElement('tabla');
tablaDatos.classList.add('table', 'table-striped');
var tr = document.createElement('tr');
var th = document.createElement('th');
th.innerText = "Fecha";
tr.appendChild(th);
th = document.createElement('th');
th.innerText = "Kilos";
tr.appendChild(th);
tablaDatos.appendChild(tr);

for (let i in jDatos) {
etiquetas.push(jDatos[i].fechaVenta);
tPrecio.push(jDatos[i].totalPrecio);
coloresP.push("blue");

tr = document.createElement('tr');
var td = document.createElement("td");
td.innerText = jDatos[i].fechaVenta;
tr.appendChild(td);


td = document.createElement("td");
td.innerText = parseFloat(jDatos[i].totalPrecio).toLocaleString();
tr.appendChild(td);

tablaDatos.appendChild(tr);
}

var idCont = document.getElementById("idContTabla");
idCont.appendChild(tablaDatos);

var ctx = document.getElementById('idGrafica').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: etiquetas,
datasets: [
{
label: 'Kilos',
data: tPrecio,
backgroundColor: coloresP

},

]
},
options: {
scales:{
yAxes:[{
ticks:{

beginAtZero:true

}
}],
},
}
});
}
});
}
}

var oIndex = new index();
setTimeout(function () { oIndex.ini(); }, 100);
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder

Quiero que se vea el total de cada barra(permanentemente) en mi grafico en JS

Publicado por Martin (1 intervención) el 15/12/2021 14:17:49
Primero debes referenciar el plugin DataLabels de Charts.js en tu HTML, debajo de la referencia al Charts.js:

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <!-- Libreria Charts.js -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>  <!-- Plugin DataLabels -->

Luego, en tu Javascript que inicializa el gráfico, dentro de options indicas que vas a usar el plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
options: {
    scales:{
        yAxes:[{
            ticks:{
                beginAtZero:true
            }
        }],
    },
    plugins: {
        datalabels: {
              display: true,
              align: 'center',
              anchor: 'end'
        }
     }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar