FlotChart — отображение распределения на почасовой основе независимо от метки времени

Я хотел бы иметь флот-диаграмму, отображающую распределение всех данных (ось x представляет значения от 0 до 10, ось y - только час, начиная с 7:00 до 19:00).

Я не мог понять, как мне настроить конфигурацию флотчарта в этом отношении.

Вот пример json моего набора данных:

[1409558400000, 7.45],[1409562000000, 5.71], [1409565600000, 7.50], [1409569200000, 7.63], [1409576400000, 3.14],

[1409644800000, 7.45],[1409648400000, 5.71], [1409652000000, 7.50], [1409655600000, 7.63], [1409662800000, 3.14],

[1409731200000, 7.45],[1409734800000, 5.71], [1409738400000, 7.50], [1409742000000, 7.63], [1409749200000, 3.14]]
;

А вот и код для флотчарта; Проблема в том, что он сортирует все серии на основе их временных меток. Я не хочу этого.
Я бы хотел, чтобы они соответствовали только их параметру "час".

Кто-нибудь знает, возможен ли с помощью флотчарта только час по оси X без сортировки ряда данных?

 $("#a-dag").click(function() {
 console.log("a dag filtering will be applied...");

  $.plot("#placeholder", [d], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    markings: [{
                        yaxis: {
                            from: 0,
                            to: 4
                        },
                        color: "#F2CDEA"
                    }, {
                        yaxis: {
                            from: 4,
                            to: 7
                        },
                        color: "#D7EEE1"
                    }, {
                        yaxis: {
                            from: 7,
                            to: 12
                        },
                        color: "#F2CDEA"
                    }]
                },
                xaxis: {
                    mode: "time",                       
                    twelveHourClock: true,                  
                },
                yaxis: {
                    min: 0,
                    max: 12
                }
            });


  });

charts distribution flot hour graphic
person shamaleyte    schedule 17.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Просто преобразуйте временные метки в часы, например, так:

$.each(d, function (index, datapoint) {
    datapoint[0] = (new Date(datapoint[0])).getHours();
});

(Если вы хотите, чтобы значения с AM / PM изменялись соответствующим образом.)
И, конечно же, удалите mode: "time" из ваших вариантов.

См. этот fiddle для измененного кода.

person Raidri    schedule 18.02.2015
comment
Большое спасибо Raidri за то, что предоставил очень простой и полезный способ сделать это. Но возможно ли также сохранить временную метку каждого данных? Потому что я хотел бы, чтобы пользователь мог видеть информацию о дате при нажатии на точку данных? Вот почему, я думаю, также необходимо иметь временную метку внутри графического объекта. Возможно ли иметь что-то подобное для массива графических объектов, [1409558400000, 7.45, 1409558400000]. Таким образом, я могу использовать ваш метод для преобразования [0] в часы и использовать [3] для отображения более подробной информации? - person shamaleyte; 18.02.2015
comment
Я отмечу этот ответ принятым и открою новую проблему для моего следующего вопроса. @Райдри еще раз спасибо. - person shamaleyte; 19.02.2015
comment
Да, это возможно, см. этот ответ в качестве примера. - person Raidri; 19.02.2015
comment
Не могли бы вы также рассказать мне, как я могу добавить AM / PM к оси x в вышеупомянутом вашем решении? Когда я применяю .getHours() для каждого, я получаю цифру. Как я могу манипулировать осью X, чтобы иметь am/pm, но также отображать то же самое содержимое на графике? - person shamaleyte; 20.02.2015
comment
Используйте функцию форматирования для отметок оси X (и значений подсказки), как в этой обновленной скрипте. - person Raidri; 20.02.2015
comment
Вот и все. Я ценю вашу огромную помощь, Райдри. - person shamaleyte; 20.02.2015
comment
Чтобы выразить эту признательность, вы можете проголосовать за мой ответ (см. Справочный центр) - person Raidri; 20.02.2015