График области Highcharts с рубиновым гемом lazy_chart

Я пытаюсь использовать https://github.com/michelson/lazy_high_charts для рендеринга простой диаграммы области с датами на оси X и оценками на оси Y. Я использовал следующий фрагмент из lazy_high_charts. График отображается, но ось X не является датами.

@h = LazyHighCharts::HighChart.new('graph', style: '') do |f|
  f.options[:chart][:defaultSeriesType] = "area"
  f.options[:plotOptions] = {areaspline: {pointInterval: 1.day, pointStart: 10.days.ago}}
  f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
  f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9])
  f.xAxis(type: :datetime)
end

Я хотел бы иметь временные ряды с дневным интервалом, что-то вроде этого http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-pointstart-datetime/.

Приведенный выше код создает следующий HTML-код ( http://jsfiddle.net/nUxvA/)

Я пытался сравнить оба варианта и варианты сюжета разные. Как я могу иметь шкалу дневного интервала на оси X?

1 ответ

Есть 3 проблемы с приведенным выше кодом.

  1. pointInterval должен быть в миллисекундах, поэтому 1.day должен быть 1.day * 1000
  2. Параметр pointStart должен быть в миллисекундах UTC, поэтому значение 10.days.ago должно быть 10.days.ago.getutc.to_i * 1000.
  3. areapline должен быть серии

Это рисует даты на оси х.

Другие вопросы по тегам