Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

126
Vistas
la etiqueta en el eje x no se muestra completamente en Chart.js

Tengo datos del backend (flask-sqlalchemy con mysql) en los que los datos contienen la fecha en números enteros para la semana, el mes y el año que se ve así:

en este caso la x representa la semana del año:

 let month_true = [ { bob: { "base-certificate": 60, "case-certificate": 1, "standard-certificate": 7, }, x: 9, }, { bob: { "base-certificate": 30, "case-certificate": 4, "standard-certificate": 5, }, x: 11, }, ];

Lo primero que hice fue mapear los datos y cambiar la x a un formato legible para Javascript y chart.js, usando una función que convierte el número de la semana del año en la fecha real:

la función:

 function getDateOfWeek(w, y) { var d = 1 + (w - 1) * 7; // 1st of January + 7 days for each week return new Date(y, 0, d); }

Mapeo a través de los datos:

 let newData = month_true.map(function (m) { let dateObject = new Date(); let year = dateObject.getFullYear(); const weekDate = getDateOfWeek(mx, year); let r = new Date(Date.parse(weekDate)); const newd = { x: r.setHours(0, 0, 0, 0), base: m.bob["base-certificate"], case: m.bob["case-certificate"], standard: m.bob["standard-certificate"], }; return newd; }); let newdate = newData.map(function (d) { return dx; });

ahora construye el gráfico:

 let ctx = document.getElementById("chart").getContext("2d"); let config = { //labels: newdate, type: "bar", data: { datasets: [ { label: "base", data: newData, parsing: { xAxisKey: "x", yAxisKey: "base", }, }, { label: "Case", data: newData, parsing: { xAxisKey: "x", yAxisKey: "case", }, }, { label: "Standard", data: newData, parsing: { xAxisKey: "x", yAxisKey: "standard", }, }, ], }, options: { scales: { x: { ticks: { beginAtZero: true, }, offset: true, type: "time", time: { //isoWeekday: true, unit: "week", }, }, }, }, }; let myChart = new Chart(ctx, config);

Se trazó pero el eje x no muestra la segunda etiqueta:

ingrese la descripción de la imagen aquí

¿Qué puedo hacer para que las etiquetas aparezcan completamente?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Esto se debe a que, de forma predeterminada, la escala de tiempo genera marcas automáticamente, si no desea incluir las etiquetas de sus datos, debe configurar ticks.source en datos:

 options: { scales: { x: { type: 'time', ticks: { source: 'data' } } } }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda