2014-05-08 9 views
7

Ich habe ein kleines Problem mit xCharts, das ich versuche herauszufinden. Ich möchte ein Balkendiagramm anzeigen, das eine Nummer mit dem Wochentag anzeigt. Ich habe es dazu gebracht, aber ich habe ein Problem, dass es in der richtigen Reihenfolge angezeigt wird. Siehe Bild unten:xCharts Sortierung nach Wochentag

enter image description here

Wie Sie sehen können, die Tage der Woche sind nicht in der richtigen Reihenfolge. Durch das Lesen der Dokumentation auf ihrer Website kann ich sagen, dass es etwas mit der Option sortX zu tun hat, also habe ich eine Menge verschiedener Dinge ausprobiert, die für mich nicht wirklich funktionierten.

Unten ist der Code, den ich benutze:

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 
     }] 
    }); 
}); 

Die Daten aus der JSON-Anforderung zurückgegeben wird, ist wie folgt:

[ 
    { 
     "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 
    } 
] 

Jede Hilfe wirklich geschätzt wird.

Antwort

6

Erstellen Sie ein Objekt für die Tage der Woche (mydays) sollte wie:

[ 'Monday': 1, 'Dienstag': 2 ...]

Und auf sortX implementiert einfach die Ordenation.

"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; 

    } 

Links:

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

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

+0

, die wie die effizienteste Design scheint. Ich würde rohe Kraft gehen und einen Wechsel Montag: 1, etc ... tun, aber das ist besser. –