【问题标题】:xCharts sorting by day of the weekxCharts 按星期几排序
【发布时间】:2014-06-26 12:17:30
【问题描述】:

我正在尝试解决 xCharts 的一个小问题。我想显示一个条形图,其中显示一个带有星期几的数字。我已经让它这样做了,但是我在让它以正确的顺序显示时遇到了问题。见下图:

如您所见,星期几的顺序不正确。通过阅读他们网站上的文档,我可以看出它与提供选项 sortX 有关,所以我尝试了一堆对我来说并不真正有用的不同方法。

下面是我使用的代码:

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

JSON请求返回的数据如下:

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

非常感谢任何帮助。

【问题讨论】:

    标签: javascript jquery json charts bar-chart


    【解决方案1】:

    为一周中的几天(mydays)创建一个对象应该是这样的:

    ['星期一':1,'星期二':2...]

    在 sortX 上只需实现排序即可。

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

    链接:

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

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

    【讨论】:

    • 这似乎是最有效的设计。我会去蛮力并做一个开关返回星期一:1,等等......但这更好。
    猜你喜欢
    • 1970-01-01
    • 2011-10-31
    • 1970-01-01
    • 2021-12-19
    • 1970-01-01
    • 2016-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多