2015-02-17 5 views
1

Я хотел бы иметь флотатор , который отображает распределение всех данных (ось x представляет значения от 0 до 10, ось y для часа только начиная с 7 утра до 7 вечера).FlotChart - Отображение распределения по почасовому принципу независимо от отметки времени

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

Вот пример JSON моего Dataset:

[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]] 
; 

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

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

$("#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 
       } 
      }); 


    }); 

ответ

1

Просто конвертировать ваши временные метки часов, например, так:

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

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

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

+0

Большое спасибо Raidri за предоставление очень простого и полезного способа сделать это. Но возможно ли сохранить временную метку каждой информации? Потому что я хотел бы, чтобы пользователь мог видеть информацию о дате при нажатии на точку данных? Поэтому, полагаю, требуется также временная метка внутри графического объекта. Возможно ли иметь что-то подобное для массива графических объектов, [1409558400000, 7.45, 1409558400000]. Таким образом, я могу использовать ваш метод для преобразования [0] в часы и использовать [3] для отображения более подробной информации? – shamaleyte

+0

Я отмечу, что этот ответ принят и откроет новый вопрос для моего следующего вопроса. @Raidri еще раз спасибо. – shamaleyte

+0

Да, это возможно, см. Этот [ответ] (http://stackoverflow.com/a/12671873/2610249) для примера. – Raidri

 Смежные вопросы

  • Нет связанных вопросов^_^