0

我正在使用 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],];
4

1 回答 1

3

有几个小问题，但你基本上就在那里。

首先你的时间戳不是有效的时间戳，如果你进入new Date(634754880000000000)你的 js 控制台，那将返回一个无效的日期。

您可以使用它在 .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"
            }
        });

通过这两个更改，我能够让您的图表正确输出。

于 2012-06-19T14:51:02.340 回答