7

Flotチャートを使用して、特定の期間のデータを表示しています（たとえば、過去30日間、過去7日間、2013年1月1日から2013年3月3日までなど）

そこで、x軸を日付とした折れ線グラフを表示したいと思います。

たとえば、startDateとendDateの2日間の場合、X軸を次のように表示するにはどうすればよいですか。

2013年1月1日| 2013年1月2日........................2013年3月3日

私のコードは次のとおりです。データ（現在は静的です）。

var mydata = [
                [1, 2.4],
                [2, 3.4 ],
                [3, 4.5 ],
                [4, 5 ],
                [5,  5],
                [6, 5],
                [7, 2 ],
                [8, 1 ],
                [9, 1.5 ],
                [10, 2.5 ],
                [11,  3.5],
                [12, 4 ],
                [13, 4 ],
                [14, 2.4],
                [15, 3.4 ],
                [16, 4.5 ],
                [17, 5 ],
                [18,  5],
                [19, 5],
                [20, 2 ],
                [21, 1 ],
                [22, 1.5 ],
                [23,  2.5 ],
                [24,   3.5],
                [25,  4 ],
                [26,  4 ],
                [27,  2.5 ],
                [28,   3.5],
                [29,  4 ],
                [30,  4 ],
            ];

var plot = $.plot($("#mychart"), [{
                data: mydata,
                label: "Y-axis label"
            }], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                colors: ["#37b7f3", "#d12610", "#52e136"],
                xaxis: {
                     mode: "time", timeformat: "%d/%m/%y", minTickSize: [1, "day"]
                },
                yaxis: {
                    ticks: 11,
                    tickDecimals: 0,
            min:0, max: 5
                }
            });

mydataを[date、value]のように表示する必要があることに気付きました。それは機能しますか？サーバーによって動的に生成されたデータをJSONで

[{日付、値}、{日付、値} ...]

フォーマット。ご案内ください。

4

1 に答える 1

15

数値を UNIX タイムスタンプに 1000 を掛けた値に変更する必要があります。時系列データを検索する場合、これは API からのものです。

Flot での時系列のサポートは、Javascript タイムスタンプに基づいています。つまり、時間値が予期されるか、または渡されるすべての場所で、Javascript タイムスタンプ番号が使用されます。これは数値であり、Date オブジェクトではありません。Javascript タイムスタンプは、1970 年 1 月 1 日 00:00:00 UTC からのミリ秒数です。これは、ミリ秒単位であることを除いて、Unix タイムスタンプとほぼ同じです。1000 を掛けることを忘れないでください。

API に .Net の例があります。

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

ここに例があります - http://jsfiddle.net/zxtFc/4/

于 2013-03-04T15:07:14.507 に答える