2011-07-05 19 views
1

Flotで時間モードでx-axisと表示されるデータをプロットしようとしています。 FLOT参照APIはminTickSizeが単位として「週」受け入れることを示すものではないので、私は7の値を「日」として単位を指定している:これは、7日間隔としてティック・サイズが表示さFlotのWeekly Chartデータの日付が正しく表示されない

minTickSize: [7, "day"], 

いくつかのダニでは約8〜9日間離れている。矛盾したダニを示す例を次に示します。http://jsfiddle.net/UEePE/583/

私は、グラフが私が期待している単純な線をプロットしていないことを知っています。理由を理解しようとしています。 mode:time以外のすべてのオプションをxaxisから削除すると、動作するように見えますが、他のオプションを追加した場合は表示されません。

Flotにティックを7日/ 1週間おきに追加する方法や、チャートを実際にこの場合にプロットする方法については、何か助けてください。

ありがとうございました!

+0

なぜチャートを考え出し:簡単な方法は、あなたの最初のデータ系列から、あなたのx軸の値を取るティック配列を作成し、x軸のハッシュにそれを渡すことです表示されません。ミリ秒が間違って追加されました。したがって、チャートは開発環境に正しく表示されるようになりましたが、正確に7日間離れていないので、チャートには間違った目盛りが残っています。スクリーンショットはhttp://imageshack.us/photo/my-images/684/flotchart.png/ ですが、JSFiddleのチャートはまったく表示されません。更新されたリンクはjsfiddle.net/UEePE/583です。上記の元の投稿でも修正されています。 – Harman

答えて

6

ファーストアップ。 Flotのデータ引数は、一連の配列です。各系列は点の配列であり、各点はxとyの2つの値の配列です。だからあなたのデータは次のようになります。

var data = [ [ 
    [1301634000000, 315.71], //Apr 1, 2011 
    [1302238800000, 209.21], //Apr 8, 2011 
    [1302843600000, 420.36], //Apr 15 
    [1303448400000, 189.86], //4/22 
    [1304053200000, 314.93], //4/29 
    [1304658000000, 279.71], //5/6 
    [1305262800000, 313.34], //5/13 
    [1305867600000, 114.67], //5/20 
    [1306472400000, 315.58] //5/27 
] ]; 

次FLOTは[0.25、 "月"]にあなたの[7、 "日"]に変換されます。 minTickSizeには非常に多くの値しかありません(ソースコードで "spec"を検索してください)。

これは、チック値を自分で指定する必要があることを意味します。

var ticks = []; 
for (var i = 0; i < data[0].length; i++) { 
    ticks.push(data[0][i][0]); //corrected the missing closing bracket here.. 
} 
その後

$.plot($("#placeholder"), data, { 
    xaxis: { 
    mode: "time", 
    ticks: ticks, 
    timeformat: "%m/%d", 
    min: (new Date(2011, 2, 31)).getTime(), 
    max: (new Date(2011, 4, 31)).getTime() 
    }, 
    ..etc.. 
+0

ありがとうございます!私はあなたのポストで不足している閉じ括弧を修正し、それは私の開発に完全に働いた。環境。しかし、まだjsfiddleでは動作しません.. – Harman

+0

[jsFiddle](http://jsfiddle.net/JMBucknall/eQ2eb/)で私のためにうまく動作します – jmbucknall

+0

これを使用しましたが、これを使用しているときにパフォーマンスが低下しています。他の解決策を教えてもらえますか? –