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);
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


-1