0

flot を使用して、mvc3 Web ページに積み上げられた時系列を表示しています。グラフは正しく表示され、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;
    }

2 番目の問題は、$.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"
            }
        });

これらの 2 つの変更により、グラフを正しく出力することができました。

于 2012-06-19T14:51:02.340 に答える