Estoy usando morris.js gráfico de líneas con el fin de mostrar diferentes valores de la serie.

Gráfico de la línea de morris.js formato de fecha en el eje X

Me gustaría formatear mi eje X de modo que en lugar de el año en que me puede poner un 3 chacarter día de la semana.

Ejemplo:

  • 2016-05-10 debe JUE-05-10

Este es mi código real:

Morris.Line({
    element: 'linechart',
    data: data,
    lineColors: ['#819C79', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
    xkey: 'period',
    ykeys: ['park1','park2','park3','park4','park5'],
    labels: ['PARK 1', ''PARK 2', ''PARK 3', ''PARK 4', ''PARK 5'],
    xLabels: 'day',
    xLabelAngle: 45,
    resize: true
});

Alguna pista?

InformationsquelleAutor VAAA | 2016-06-08

1 Comentario

  1. 10

    Agregar xLabelFormat para convertir la fecha en el formato deseado. Pruebe el xLabelFormat función en el siguiente fragmento de código:

    JS:

    Morris.Line({
    element: 'chart',
    data: [
    { period: '2016-05-10', park1: 200, park2: 200, park3: 50, park4: 10, park5: 0 },
    { period: '2016-05-11', park1: 15, park2: 275, park3: 5, park4: 60, park5: 0 },
    { period: '2016-05-12', park1: 80, park2: 20, park3: 30, park4: 30, park5: 0 },
    { period: '2016-05-13', park1: 100, park2: 200, park3: 250, park4: 50, park5: 0 },
    { period: '2016-05-14', park1: 50, park2: 60, park3: 20, park4: 10, park5: 0 },
    { period: '2016-05-15', park1: 75, park2: 65, park3: 10, park4: 60, park5: 0 },
    { period: '2016-05-16', park1: 175, park2:95, park3: 110, park4: 30, park5: 0 },
    { period: '2016-05-17', park1: 150, park2:95, park3: 90, park4: 111, park5: 0 },
    { period: '2016-05-18', park1: 120, park2:95, park3: 60, park4: 47, park5: 0 },
    { period: '2016-05-19', park1: 60, park2:95, park3: 50, park4: 231, park5: 0 },
    { period: '2016-05-20', park1: 10, park2:95, park3: 100, park4: 80, park5: 0 }
    ],
    lineColors: ['#819C79', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
    xkey: 'period',
    ykeys: ['park1','park2','park3','park4','park5'],
    labels: ['PARK 1', 'PARK 2', 'PARK 3', 'PARK 4', 'PARK 5'],
    xLabels: 'day',
    xLabelAngle: 45,
    xLabelFormat: function (d) {
    var weekdays = new Array(7);
    weekdays[0] = "SUN";
    weekdays[1] = "MON";
    weekdays[2] = "TUE";
    weekdays[3] = "WED";
    weekdays[4] = "THU";
    weekdays[5] = "FRI";
    weekdays[6] = "SAT";
    return weekdays[d.getDay()] + '-' + 
    ("0" + (d.getMonth() + 1)).slice(-2) + '-' + 
    ("0" + (d.getDate())).slice(-2);
    },
    resize: true
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
    <div id="chart"></div>

    • Muchas gracias… muy fácil, pero el código limpio.
    • Eres bienvenido ; )

Dejar respuesta

Please enter your comment!
Please enter your name here