更新jQuery Flot圖表的X軸不起作用

Question

我正在處理Jquery Flot Chart，並且無法以正確的月份更新xaxis，例如，如果我選擇2016年11月1日至2017年3月1日的日期范圍，則數據會恢復正常，但是x軸月份訂單被弄亂了，所以當它顯示為之字形時。 任何想法將不勝感激。

謝謝

獲取圖表

    public dynamic TicketTrends(string start, string end)
    {
        var startDate = DateTime.Parse(start);
        var endDate = DateTime.Parse(end);
        var client = CCHttpClient.GetClient();
        var getData = client.GetAsync("api/tile/ServiceTickets");

        if (getData.Result != null)
        {
            var result = getData.Result.Content.ReadAsStringAsync().Result;
            var data = JsonConvert.DeserializeObject<IEnumerable<ServiceTickets>>(result);
            try
            {
                var allData = (from item in data
                               where item.TicketCreatedOn.Value >= startDate && item.TicketCreatedOn.Value <= endDate
                               group item by new { item.TicketCreatedOn.Value.Month, item.TicketCreatedOn.Value.Year} into grp
                               select new
                               {
                                   Month = grp.Key.Month,
                                   Year = grp.Key.Year,
                                   TicketTotal = grp.Count(),
                               });


                var chart = new[]
                {
                    new { label="Ticket Total",
                        data = allData.OrderBy(x=>x.Month).Select(x=>new int[] {x.Month,x.TicketTotal})
                    }
                };
                return Json(chart, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e.Message);
                throw;
            }
        }
        return Json("", JsonRequestBehavior.AllowGet);
    }

JSON這樣返回

[{"label":"Ticket Total","data":[[12,6],[1,14],[2,30],[3,4]]}]

這是我的Javascript / Jquery

    $(function () {
    var barOptions = {
        series: {
            lines: {
                show: true,
                lineWidth: 2,
                fill: true
            }
        },
        yaxis: { min: 0, tickFormatter: formatter },
        xaxis:{
            ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]]
        };

    function formatter(val, axis) {
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };


    cb(start, end);

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        console.log(start + " " + end);

        $.ajax({
            url: dataurl,
            method: 'GET',
            data: { 'start': start.format('MMMM D, YYYY'), 'end': end.format('MMMM D, YYYY')},
            success: function (data) {
                console.log(JSON.stringify(data));
                $.plot($("#tickettrendchart"), data, barOptions);
            },
            error: function (req, err) {
                console.log(err);
            }
        });
    }

Answer 1

當您的x軸僅包含月份時，則需要按月份對數據進行排序，因此，

[{"label":"Ticket Total","data":[[12,6],[1,14],[2,30],[3,4]]}]

你得到

[{"label":"Ticket Total","data":[[1,14],[2,30],[3,4],[12,6]]}]

如果月份來自不同的年份，則包括年份或更好的使用時間模式 。