2014-05-08 24 views
7

Mam mały problem z xCharts, które próbuję wymyślić. Chcę wyświetlić wykres słupkowy, który pokazuje liczbę z dniem tygodnia. Zrobiłem to, aby to zrobić, ale mam problem z wyświetleniem go w odpowiedniej kolejności. Patrz zdjęcie poniżej:xCharts sortowanie według dnia tygodnia

enter image description here

Jak widać, dni tygodnia nie są w odpowiedniej kolejności. Czytając dokumentację na ich stronie internetowej mogę powiedzieć, że ma coś wspólnego z zapewnieniem opcji sortX, więc spróbowałem wielu różnych rzeczy, które tak naprawdę nie działały dla mnie.

Poniżej znajduje się kod, który używam:

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

Dane zwracane z żądania JSON jest następujący:

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

Każda pomoc jest bardzo ceniona.

Odpowiedz

6

Tworzenie obiektu dla dni tygodnia (mydays) powinno być tak:

[ 'poniedziałek': 1, 'wtorek': 2 ...]

A na sortX po prostu implementuj ordenację.

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

    } 

Linki:

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

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

+0

który wydaje się najbardziej efektywny design. Poszedłbym brutalną siłą i zrobiłem zwrot w poniedziałek: 1, etc ... ale to jest lepsze. –

Powiązane problemy