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?
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' } } } }