Как использовать значения Date в диаграммах, созданных с помощью gRaphael? - PullRequest
1 голос
/ 16 июня 2010

Маленькая предпосылка: Я на диете и пытаюсь составить график потери веса.

Для этого я использую небольшое приложение django для хранения показаний весов и gRaphael (http://g.raphaeljs.com/) библиотеку диаграмм для рисования отчетов). Вы можете посмотреть здесь: http://www.totanus.net/weight/

В настоящее время я печатаю даты по оси X в формате 'ymd', чтобы упорядочить их должным образом, но я не совсем удовлетворен (на самом деле я даже не уверен, что диаграмма верна вообще ... ) и мне интересно, есть ли лучший способ сделать даты.

Основные вопросы:

  1. Есть ли способ использовать разные этикетки, отличные от «100610» или '20100610'?
  2. Есть ли способ установить фиксированные метки оси X и Y каждый н-дней или н-кг?
  3. Можете ли вы предложить мне лучшую практику в рендеринге такого рода диаграммы (мне особенно интересно вычислять мою общую тенденцию)

Заранее спасибо за любую помощь!

Teo

Ответы [ 4 ]

5 голосов
/ 01 февраля 2011

Учитывая x, который является Date объектом, я смог достичь этого, используя следующие шаги:

  1. Возьмите самое низкое значение Date и кешируйте значение его getTime() метода в переменной (originX)
  2. Для каждого Date (curDate) преобразовать его во временное смещение из originX.

    var timePassed = curDate.getTime() - originX
    
  3. Участок x против y.

Выше приведен график, где метки указаны в миллисекундах от времени UTC. Чтобы он выглядел красиво, делайте так, как предлагает @Alastair.

Вот пример кода jQuery. (Обратите внимание, что вам нужно будет предоставить функцию formatDate() для правильного отображения дат)

$.each(chart.axis[0].text.items, function(i, label) {
    var old = label.attr("text");
    if(old) {
        var newLabel = formatDate(originX + x);
        if(newLabel) {
            label.attr({ text: newLabel });
        }
    }
});

Надеюсь, это поможет!

3 голосов
/ 10 августа 2010

Я не тестировал этот код, но изучал ту же проблему.

Если вы храните целочисленное представление времени (отметки начиная с 01.01.1970) в качестве значений по оси X, вы можете перебирать значения и преобразовывать их в даты.

Я получил эту идею от: http://github.com/DmitryBaranovskiy/g.raphael/issues#issue/8

var canvas = Raphael("holder")
graph = canvas.g.linechart(....)

$.each(this.graph.axis[0].text.items, function (index,label) {
    originalText = label.attr('text'); 
    newText = /* some transformation to originalText */
    label.attr({'text': newText});
});

Где ваш newText представляет собой преобразование из исходного текстового значения (которое является вашим временем в тиках) в строку даты.

Как я уже сказал, я не тестировал этот код, но идея теоретически обоснована.

1 голос
/ 16 ноября 2010

Я нуб, это то, что я нашел из кода.

graph.axis[0].text.items[0].attr({'text': "Jan 3 2010"}) ;

1 голос
/ 16 ноября 2010

См. Также: вторая часть http://weblog.bocoup.com/alternate-x-axis-intervals-in-g-raphael-js-linechart. Это то же самое, что решение Аластера, но иногда помогает объяснить то же самое по-другому.

...