2016-03-02 3 views
1

Мои данные вроде как в изображении ниже:Последний пункт не отображается в Рикша Graph

enter image description here

рикша график идеально подходит для этих данных, поскольку дата и временной интервал между всеми датами длинны. Я установил столбец «цена» как данные Y-Axis и столбец «date» в качестве данных X-Axis. Но когда я добавляю новую запись, как показано ниже, то новая точка не отображается для этой новой записи, потому что временной интервал составляет 1 минуту.

enter image description here

См ввод ID 26 и 27, интервал времени 1 мин и 2 секунды. Таким образом, график не показывает эту новую точку. А также я хочу установить дату как значения X-Axis данных с каждой точкой.

После ввода 27 мой график не показывал точку в 300. Мой график показывает 26-ю позицию с 65-ю ценами. См. Ниже изображение.

enter image description here

Может быть, это будет скрывать из-за интервала. И если я увеличу интервал, то он будет отображаться в порядке.

ответ

1

Оба вопроса, которые у вас были, касаются оси X графика. На скриншоте, который вы опубликовали, я предполагаю, что ось X принимает целочисленные значения (23, 24, 25 и т. Д. Вокруг пика вашего графика).

Чтобы выстроить свою последнюю точку на график, вы вставляете еще один элемент в массив и визуализируете график. Ниже приведен пример набора данных [12x2].

var data = [{ x: 1, y: 92228531 }, 
     { x: 2, y: 106021568 }, 
     { x: 3, y: 123202660 }, 
     { x: 4, y: 132165129 }, 
     { x: 5, y: 151325798 }, 
     { x: 6, y: 179323175 }, 
     { x: 7, y: 203211926 }, 
     { x: 8, y: 226545805 }, 
     { x: 9, y: 248709873 }, 
     { x: 10, y: 281421906 }, 
     { x: 11, y: 308745538 }, 
     { x: 12, y: 329538099 } ]; 

var graph = new Rickshaw.Graph({ 
    element: document.querySelector("#chart"), 
    width: 540, 
    height: 240, 
    series: [ { 
      data: data, 
      color: 'steelblue' 
    } ] 
}); 

var x_axis = new Rickshaw.Graph.Axis.X({ graph: graph }); 
var y_axis = new Rickshaw.Graph.Axis.Y({ 
    graph: graph, 
    orientation: 'left', 
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
    element: document.getElementById('axis0'), 
}); 

graph.render(); 

Что касается вашего последнего вопроса, если вы хотите, чтобы сделать время в оси X вы должны использовать Rickshaw.Graph.Axis.Time

Например:

var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph }); 

Для Axis.Time вам нужно сделать убедитесь, что ваши данные (в вашем случае данные из столбца «дата») находятся в правильном формате.

Попробуйте использовать .toUTCString(), вы можете найти пример here.

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