Flot Time系列不格式化

Question

我正在使用flot在mvc3网页中显示堆叠的时间序列。图表正确显示xaxis格式不影响图形。

我使用以下代码将数据传递给视图

    var range = DateTime.Today.AddDays(-30);
        var graphData = _db.UpdateStatistics.Where(x => x.Day > range).OrderBy(x=> x.Day);
        var viewGraph = new SubscriptionUpdatesGraphViewModel();

        foreach (var entry in graphData)
        {
            viewGraph.Total.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Total));
            viewGraph.Attention.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Attention));
            viewGraph.Complete.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Complete));
            viewGraph.Fail.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Failed));
            viewGraph.Notify.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Pending));
        }


        ViewBag.Graph = viewGraph;
        return View(result);

在视图中，我有以下

<script id="source" type="text/javascript">
$(function () {
    var total =  @ViewBag.Graph.SerialisedTotal;       
    var attention =  @ViewBag.Graph.SerialisedAttention;  
    var notify =  @ViewBag.Graph.SerialisedNotify;     
    var complete =  @ViewBag.Graph.SerialisedComplete;     
    var fail =  @ViewBag.Graph.SerialisedFail;    

    var stack = true, bars = false, lines = true, steps = false;

    function plotWithOptions() {
        $.plot($("#graph"), [{label:'Need Attention',data:attention}, 
                             {label:'Ready to apply',data:notify},                             
                             {label:'Failed',data:fail},
                             {label:'Completed',data:complete}], 
            { series: {stack : stack, 
                       lines: { show: lines, 
                                fill: true, 
                                steps: steps }  , 
               xaxis: {mode: 'time' ,                                                                           
                        timeformat: "%d",  
                        tickSize: [5, "day"]  }   }
        });
    }

    plotWithOptions();

});

图表似乎显示原始刻度而没有别的

示例数据：

    var total =  [[634754880000000000,12],[634755744000000000,10],];  
    var attention =  [[634754880000000000,2],[634755744000000000,0],]; 
    var notify =  [[634754880000000000,2],[634755744000000000,10],];   
    var complete =  [[634754880000000000,3],[634755744000000000,10],]; 
    var fail =  [[634754880000000000,5],[634755744000000000,0],];    

Answer 1

有一些小问题，但你基本上就在那里。

首先，如果你在js控制台中转到new Date(634754880000000000)，那么你的时间戳就不是有效的时间戳，而是会返回无效的日期。

您可以使用它来生成.NET中的时间戳（这只是直接从flot API.txt中提取）：

    public static long GetJavascriptTimestamp(DateTime input)
    {
        var span = new TimeSpan(DateTime.Parse("1/1/1970").Ticks);
        var time = input.Subtract(span);
        return time.Ticks / 10000;
    }

第二个问题是你对$ .plot的调用略有偏离，xaxis不是系列的成员，但与系列处于同一级别，所以像这样：

$.plot($("#graph"),
        [{label:'Need Attention',data:attention}, 
        {label:'Ready to apply',data:notify},
        {label:'Failed',data:fail},
        {label:'Completed',data:complete}],
        {
            series: {
                stack: stack,
                lines: {
                    show: lines,
                    fill: true,
                    steps: steps
                }
            },
            xaxis: {
                mode: "time",
                timeformat: "%d"
            }
        });

通过这两项更改，我可以正确输出图表。