1

tengo un gráfico de líneas con chart.js, pero necesito que la distancia entre las fechas del eje x sean reales, quiero decir, tengo la misma distancia entre las 12:00 y las 12:30 que entre las 13:00 y las 14:30, y necesito que la distancia que haya sea relacional, es decir no puede haber el mismo espacio entre dos puntos con 30minutos de diferencia, que entre 2 puntos con 2 horas de diferencia, mi código es este:

 var ctx = document.getElementById('myChart').getContext('2d');
 
            var labels = ['10:20', '10:25', '11:00', '11:30', '13:00', '13:10'];
            var values = [0, 10, 5, 2, 10, 5];
 
            var myChart = new Chart(ctx, {
                type: 'line', 
                data: {
                    labels: labels,
                    datasets: [{
                        label: '# of Votes',
                        data: values,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ]
                    }]
                }, 
                options: {
                    scales: {
                        y: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }],
                        x: {
                            type: 'time',
                            time: { 
                                tooltipFormat: 'hour'
                            },
                        }
                    }
                }
            });

y mi gráfico se ve tal que así: grafico con chart.js

alguien sabe como puedo poner que la distancia entre los labels del eje x sean relacionadas con el tiempo? si no es con chart.js, alguien conoce alguna otra librería que permita esto? estoy usando Angular para el frontend

3
  • 1
    no se si existe alguna caracteristica para eso pero yo meteria los labels como describes y trataria de cuadrar con los valores el 13 oct. 2021 a las 11:40
  • al final he podido con morris.js
    – Héctor
    el 13 oct. 2021 a las 12:16
  • Debes de crear los valores dentro de esos rangos como describe @NicolasOñate. Veo dos opciones, que se queden en blanco ( 0 ), o que promedies la distancia, aunque esto ultimo cambiaria mucho la forma de la gráfica.
    – Legna
    el 13 oct. 2021 a las 13:49

1 respuesta 1

1

Para que el eje del tiempo te quede escalado, debes pasarle a chart.js los labels de tipo fecha. Puedes hacerlo utilizando moment.js.

Te adjunto un ejemplo:

var ctx = document.getElementById('myChart').getContext('2d');
var labels = ['10:20', '10:25', '11:00', '11:30', '13:00', '13:10'];
var values = [0, 10, 5, 2, 10, 5];
labels = labels.map(e => {
    let [hora, min] = e.split(':')
    const m = moment({hour: hora, minute: min });
    return m
});
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: "# of Votes",
            data: values,
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        'hour': 'HH:MM',
                    },
                    tooltipFormat: 'HH:MM'
                },       
                 ticks: {
                    autoSkip: true,
                    maxTicksLimit: 5,
                    maxRotation: 0,
                    minRotation: 0
                  }
            }],
        },
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<canvas id="myChart"></canvas>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.