jQuery Flot Tick/Date Alignment

Код

Пример за моя проблем: http://jsfiddle.net/x46RQ/

Цел

Искам графиката да бъде лентова графика по следния начин: http://jsfiddle.net/Lbd85/, но очевидно с дати като оста x. Ако добавя данните си в тази цигулка, това се обърква като изброеното по-горе, както се вижда тук: http://jsfiddle.net/73G7Z/

Въпроси

  • Защо всичките 3 дни, предоставени в променливата за данни, не се показват?
  • Защо лентите не са подредени с подходящите отметки по оста x?
  • Защо промяната на данните и режима към време напълно обърква това, което иначе би било функционална и точна лентова графика?

Заобикаляща среда

  • jQuery 1.7.1
  • jQuery Mobile 1.0.1
  • Флот 0,7

Благодаря

Уведомете ме, ако е необходима допълнителна информация.


javascript flot jquery-plugins
person Eric H    schedule 27.02.2012    source източник

Отговори (1)


arrow_upward
4
arrow_downward

Част #1, Вие посочихте минимална стойност y от 0 във вашите опции за флот, а вашата точка от данни #2 има стойност нула. Така че е там, но е много малък, почти невидим.

Част #2, трябва да компенсирате вашите дати от потребителската часова зона:

Нещо като това:

var tzOffset = new Date();
tzOffset = tzOffset.getTimezoneOffset()*60*1000;
data.push([(new Date("2012/02/20").getTime()-tzOffset), 1]);

Част #3, Вашата графика е бъркотия, защото сте посочили width, когато всъщност опцията, която търсите, е barWidth и трябва да посочите ширината по отношение на времето, т.е. милисекунди. Вижте тук как. Нещо като barWidth: 12*60*60*1000 изглежда добре.

Накратко, ето как ще изглежда: http://jsfiddle.net/ncTd3/

person Ryley    schedule 27.02.2012
comment
Благодаря за вашия отговор. Защо лентите не са центрирани и защо отметките по оста x все още са извън центъра? Наистина бих искал да изглежда идентично с лентовата графика, която споменах във въпроса. Благодаря отново за вашия отговор. - person Eric H; 28.02.2012
comment
В моя пример jsfiddle не използвах кода за изчисляване на tzOffset, просто го зададох на моя (PST). Вижте го тук, вече трябва да работи за всяка часова зона: jsfiddle.net/ryleyb/ncTd3/1 - person Ryley; 28.02.2012