Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

124
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda