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
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.
który wydaje się najbardziej efektywny design. Poszedłbym brutalną siłą i zrobiłem zwrot w poniedziałek: 1, etc ... ale to jest lepsze. –