2014-05-08 3 views
7

Ho un piccolo problema con xCharts che sto cercando di capire. Voglio visualizzare un grafico a barre che mostra un numero con il giorno della settimana. L'ho ottenuto per fare questo, tuttavia ho un problema nel farlo visualizzare nell'ordine giusto. Vedi immagine qui sotto:xCharts ordinamento per giorno della settimana

enter image description here

Come si può vedere, i giorni della settimana non sono nel giusto ordine. Leggendo la documentazione sul loro sito web posso dire che ha qualcosa a che fare con la fornitura dell'opzione sortX così ho provato un sacco di cose diverse che non ha funzionato davvero per me.

Di seguito è il codice che uso:

var data3 = { 
    "xScale": "ordinal", 
    "yScale": "linear", 
    "type": "bar", 
    "main": [{ 
     "className": ".bstats", 
     "data": [{ 
      "x": "Monday", 
      "y": 1 
     }, { 
      "x": "Tuesday", 
      "y": 1 
     }, { 
      "x": "Wednesday", 
      "y": 1 
     }, { 
      "x": "Thursday", 
      "y": 1 
     }, { 
      "x": "Friday", 
      "y": 1 
     }, { 
      "x": "Saturday", 
      "y": 1 
     }, { 
      "x": "Sunday", 
      "y": 1 
     }] 
    }] 
}; 

var opts = { 
    "tickFormatX": function (x) { 
     return x.substr(0, 3); 
    }, 
    "sortX": function (a, b) { 
     /* Not sure what to do here */ 
     return 0; 
    } 
}; 

var myChart = new xChart('bar', data3, '#day_chart', opts); 
var set = []; 

$.getJSON('/dashboard/get/busy-days', function (data) { 
    $.each(data, function (key, value) { 
     set.push({ 
      x: value.x, 
      y: parseInt(value.y, 10) 
     }); 
    }); 

    myChart.setData({ 
     "xScale": "ordinal", 
     "yScale": "linear", 
     "main": [{ 
      className: ".bstats", 
      data: set 
     }] 
    }); 
}); 

I dati restituiti dalla richiesta JSON è la seguente:

[ 
    { 
     "x":"Monday", 
     "y":48 
    }, 
    { 
     "x":"Tuesday", 
     "y":65 
    }, 
    { 
     "x":"Wednesday", 
     "y":67 
    }, 
    { 
     "x":"Thursday", 
     "y":62 
    }, 
    { 
     "x":"Friday", 
     "y":83 
    }, 
    { 
     "x":"Saturday", 
     "y":65 
    }, 
    { 
     "x":"Sunday", 
     "y":56 
    } 
] 

Ogni aiuto è molto apprezzato.

risposta

6

Creare un oggetto per i giorni della settimana (MYDAYS) dovrebbe essere come:

[ 'Lunedi': 1, 'Martedì': 2 ...]

E su sortX implementa solo l'ordinazione.

"sortX": function (a, b) { 
     if (mydays[a.x] > mydays[b.x]) 
      return 1; 
     if (mydays[a.x] < mydays[b.x]) 
      return -1; 
     return 0; 
     // or return (!mydays[a.x] && !mydays[b.x]) ? 0 : (mydays[a.x] < mydays[b.x]) ? -1 : 1; 

    } 

vicini:

http://tenxer.github.io/xcharts/docs/#opt-sortX

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

+0

che sembra il design più efficiente. Mi piacerebbe fare la forza bruta e ho fatto un cambio per tornare lunedì: 1, ecc ... ma è meglio. –