2013-03-19 1 views
1

Flot을 사용하여 두 개의 데이터 계열을 비교하는 시계열 그래프를 만들려고합니다. GraphFlot 시계열 날짜 레이블이 잘못되었습니다.

공지 사항 x 축 라벨이 잘못 :

$(function() { 
    var d1 = { 
    label: "Fall 2011", 
    data: [ 
     [1296536400, 9], 
     [1296622800, 23], 
     [1296709200, 30], 
     [1296795600, 64], 
     [1296882000, 94], 
     [1296968400, 113], 
     [1297054800, 125], 
     [1297141200, 156], 
     [1297227600, 181], 
     [1297314000, 200], 
     [1297400400, 217], 
     [1297486800, 231], 
     [1297573200, 248], 
     [1297659600, 259], 
     [1297746000, 271], 
     [1297832400, 282], 
     [1297918800, 308], 
     [1298005200, 316], 
     [1298091600, 332], 
     [1298178000, 345], 
     [1298264400, 360], 
     [1298350800, 373], 
     [1298437200, 391], 
     [1298523600, 409], 
     [1298610000, 427], 
     [1298696400, 433], 
     [1298782800, 444], 
     [1298869200, 460], 
     [1298955600, 467], 
     [1299042000, 479], 
     [1299128400, 494], 
     [1299214800, 500], 
     [1299301200, 509], 
     [1299387600, 530], 
     [1299474000, 548], 
     [1299560400, 567], 
     [1299646800, 577], 
     [1299733200, 596], 
     [1299819600, 608], 
     [1299906000, 623], 
     [1299992400, 638], 
     [1300075200, 651], 
     [1300161600, 670], 
     [1300248000, 689], 
     [1300334400, 712], 
     [1300420800, 722], 
     [1300507200, 737], 
     [1300593600, 764], 
     [1300680000, 784], 
     [1300766400, 807], 
     [1300852800, 839], 
     [1300939200, 865], 
     [1301025600, 880], 
     [1301112000, 901], 
     [1301198400, 937], 
     [1301284800, 970], 
     [1301371200, 1000], 
     [1301457600, 1030], 
     [1301544000, 1064], 
     [1301630400, 1081], 
     [1301716800, 1111], 
     [1301803200, 1144], 
     [1301889600, 1176], 
     [1301976000, 1207], 
     [1302062400, 1232], 
     [1302148800, 1251], 
     [1302235200, 1270], 
     [1302321600, 1293], 
     [1302408000, 1329], 
     [1302494400, 1361], 
     [1302580800, 1398], 
     [1302667200, 1442], 
     [1302753600, 1474], 
     [1302840000, 1499], 
     [1302926400, 1524], 
     [1303012800, 1553], 
     [1303099200, 1585], 
     [1303185600, 1619], 
     [1303272000, 1658], 
     [1303358400, 1703], 
     [1303444800, 1754], 
     [1303531200, 1784], 
     [1303617600, 1830], 
     [1303704000, 1896], 
     [1303790400, 1968], 
     [1303876800, 2045], 
     [1303963200, 2140], 
     [1304049600, 2230], 
     [1304136000, 2337], 
     [1304222400, 2457], 
     [1304308800, 2532], 
     [1304395200, 2587], 
     [1304481600, 2618], 
     [1304568000, 2641], 
     [1304654400, 2658], 
     [1304740800, 2675], 
     [1304827200, 2690], 
     [1304913600, 2703], 
     [1305000000, 2719], 
     [1305086400, 2735], 
     [1305172800, 2746], 
     [1305259200, 2757], 
     [1305432000, 2761], 
     [1305518400, 2778], 
     [1305604800, 2794], 
     [1305691200, 2800], 
     [1305777600, 2804], 
     [1305864000, 2813], 
     [1305950400, 2821], 
     [1306036800, 2822], 
     [1306123200, 2833], 
     [1306209600, 2843], 
     [1306296000, 2854], 
     [1306382400, 2860], 
     [1306468800, 2871], 
     [1306555200, 2875], 
     [1306728000, 2879], 
     [1306814400, 2883], 
     [1306900800, 2886], 
     [1306987200, 2891], 
     [1307073600, 2894], 
     [1307160000, 2897], 
     [1307246400, 2898], 
     [1307332800, 2903], 
     [1307419200, 2907], 
     [1307505600, 2913], 
     [1307592000, 2914], 
     [1307678400, 2919], 
     [1307764800, 2920], 
     [1307851200, 2923], 
     [1308024000, 2929], 
     [1308110400, 2935], 
     [1308196800, 2936], 
     [1308283200, 2937], 
     [1308369600, 2940], 
     [1308456000, 2941], 
     [1308542400, 2946], 
     [1308628800, 2949], 
     [1308715200, 2957], 
     [1308801600, 2958], 
     [1308888000, 2962], 
     [1308974400, 2963], 
     [1309060800, 2965], 
     [1309147200, 2969], 
     [1309233600, 2970], 
     [1309320000, 2974], 
     [1309406400, 2975], 
     [1309492800, 2976], 
     [1309924800, 2978], 
     [1310702400, 2979], 
     [1310875200, 2980], 
     [1310961600, 2981], 
     [1311134400, 2982], 
     [1311566400, 2983], 
     [1311652800, 2984] 
    ] 
    }; 
    $.plot("#placeholder", [d1], { 
    xaxis: { 
     mode: "time", 
     timeformat: "%m/%d %h:%m" 
    }, 
    legend: { 
     show: true, 
     position: 'se' 
    } 
    }); 
}); 

이 그래프를 생성 jQuery를, jquery.flot.js 및 jquery.flot.time.js을 포함하면, 내 코드는 같다 . 유닉스 타임 스탬프는 2011 년 2 월 1 일부터 2011 년 7 월 26 일까지 다양합니다. 다양한 'timeformat'및 'minTickSize'옵션을 사용해 보았습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 전체 데이터 범위의 월 및 일 이름으로 레이블을 표시하려면 어떻게합니까?

+0

중복 - http://stackoverflow.com/questions/15199814/how-to-plot-a-date-range-on-x-axis-을 in-flot-charts/15204645 # 15204645 – Blake

답변

5

UNIX 타임 스탬프를 1000으로 곱하여 Javascript에 적합한 형식으로 가져 오려고합니다.

+0

감사합니다. RTFM'ing 중에이 문장을 놓쳤습니다. "이것은 밀리 초를 제외하고는 유닉스 타임 스탬프와 거의 동일하므로 1000을 곱하십시오!" ([docs] (https://github.com/flot/flot/blob/master/API.md#time-series-data)에서) – Jeremy

0

이 당신에게 시작 주어야한다 - http://jsfiddle.net/TZWbN/

data: [ 

     [1308888000000, 2962], 
     [1308974400000, 2963], 
     [1309060800000, 2965], 
     [1309147200000, 2969], 
     [1309233600000, 2970], 
     [1309320000000, 2974], 
     [1309406400000, 2975], 
     [1309492800000, 2976], 
     [1309924800000, 2978], 
     [1310702400000, 2979], 
     [1310875200000, 2980], 
     [1310961600000, 2981], 
     [1311134400000, 2982], 
     [1311566400000, 2983], 
     [1311652800000, 2984]] 
    }; 
관련 문제