2014-04-16 13 views
7

Sto cercando di creare qualcosa come il grafico Panoramica del pubblico di google analytics. Sto cercando di mettere Ore a partire dalle ore 12:00 mezzanotte alle 23:00 su l'asse xProblema di morris.js con ore sull'asse x

Questo è quello che sono attualmente in uso:

Morris.Line({ 

    element: 'chart_div_compare', 

    data: [    
     { hours: '00:00', a: 793, b: 729}, 
     { hours: '01:00', a: 524, b: 537}, 
     { hours: '02:00', a: 337, b: 347}, 
     { hours: '03:00', a: 272, b: 213}, 
     { hours: '04:00', a: 176, b: 169}, 
     { hours: '05:00', a: 174, b: 147}, 
     { hours: '06:00', a: 212, b: 193}, 
     { hours: '07:00', a: 341, b: 294}, 
     { hours: '08:00', a: 551, b: 501}, 
     { hours: '09:00', a: 724, b: 692}, 
     { hours: '10:00', a: 880, b: 896}, 
     { hours: '11:00', a: 955, b: 1004}, 
     { hours: '12:00', a: 1053, b: 1142}, 
     { hours: '13:00', a: 1063, b: 1150}, 
     { hours: '14:00', a: 92, b: 1123}, 
     { hours: '15:00', a: 0, b: 1151}, 
     { hours: '16:00', a: 0, b: 1222}, 
     { hours: '17:00', a: 0, b: 1155}, 
     { hours: '18:00', a: 0, b: 1246}, 
     { hours: '19:00', a: 0, b: 1100}, 
     { hours: '20:00', a: 0, b: 1199}, 
     { hours: '21:00', a: 0, b: 1395}, 
     { hours: '22:00', a: 0, b: 1361}, 
     { hours: '23:00', a: 0, b: 1005}, 
    ], 
    // The name of the data record attribute that contains x-values. 
    xkey: 'hours', 
    hideHover: 'auto', 
    // A list of names of data record attributes that contain y-values. 
    ykeys: ['a', 'b'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['2014-04-16', '2014-04-14'] 
}); 

L'asse x diventa 1900, 1910, 1920 Il mio formato è errato per la colonna delle ore? Non riesco a capire come ottenere questo al grafico a destra, ma in ultima analisi, vorrei 00:00, 01:00, ecc

+0

Chiunque ha idea di come farlo. Dovrebbe essere facile – user1050544

+2

Impostare "parseTime" su false per ignorare l'analisi di data/ora per i valori X, trattandoli invece come una serie equispaziata. – Spl2nky

risposta

26

ho appena andato nello stesso problema, forse è possibile utilizzare la seguente opzione:

parseTime: false 

Oppure è possibile personalizzare il metodo di formattazione per xlabel. Per ulteriori informazioni, è possibile verificare this website e morris on github.

+0

Ottima soluzione. Grazie. – Bugfixer

+0

Per i grafici a barre, "parseTime: false" non funziona. Sai cosa è necessario fare per mostrare il tempo in unità appropriate per i grafici a barre. – Kamal