javascript - chartjs - pie chart js

Chart.js: solo muestra etiquetas en el eje x para puntos de datos

Question

Estoy haciendo un gráfico usando Chart.js y tengo un problema con respecto al eje x de mi gráfico de líneas. He hecho un gráfico de varias líneas y todo se ve bien, como puede ver en la imagen a continuación. Lo que me gustaría lograr es que las etiquetas en mi eje x (las fechas) solo se muestren cuando hay un punto de datos en el gráfico, por lo tanto, no todos los días como ahora. Realmente no tengo mucha experiencia con todo el desarrollo web, así que cualquier ayuda es apreciada. Gracias por adelantado.

Mi código tal como está:

function newDate(day, month) {
return moment().date(day).month(month);
}
var ctx = document.getElementById("chart_hr");
var tabPane = document.getElementById("overview_hr");
var data = {
labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
datasets: [
{
fill: false,
data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
lineTension: 0,
},
{
fill: false,
data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
lineTension: 0,
}
]
};
var options = {
scales: {
xAxes: [{
type: ''time'',
time: {
displayFormats: {
''millisecond'': ''DD MMM'',
''second'': ''DD MMM'',
''minute'': ''DD MMM'',
''hour'': ''DD MMM'',
''day'': ''DD MMM'',
''week'': ''DD MMM'',
''month'': ''DD MMM'',
''quarter'': ''DD MMM'',
''year'': ''DD MMM'',
},
unitStepSize: 1,
unit: ''day'',
},
gridLines : {
display : false,
}
}],
yAxes: [{
ticks: {
min: 50,
max: 190,
stepSize: 10,
}
}],
},
};
var myLineChart = new Chart(ctx, {
type: ''line'',
data: data,
options: options
});

Answer 1

He resuelto este problema usando el método de devolución de llamada de ticks y estableciendo el autoSkip en falso . Sin embargo, no estoy usando Timescale. En la devolución de llamada, puede pasar su fecha y el formato deseado devolverá la fecha formateada.
A continuación se muestra la captura de pantalla para el mismo y el código de muestra de trabajo.

[ código de muestra ]

var ctx = document.getElementById("chart_hr");
function newDate(day, month) {
return moment().date(day).month(month);
}
var data = {
labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
datasets: [
{
fill: false,
data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
lineTension: 0,
},
{
fill: false,
data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
lineTension: 0,
}
]
};
var options = {
scales: {
xAxes: [{
ticks: {
autoSkip : false,
callback: function(value, index, values) {
return new moment(value).format(''DD MMM'');
}
},
gridLines : {
display : false,
}
}],
yAxes: [{
ticks: {
min: 50,
max: 190,
stepSize: 10
}
}],
},
};
var myLineChart = new Chart(ctx, {
type: ''line'',
data: data,
options: options
});