График области 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 проблемы с приведенным выше кодом.
- pointInterval должен быть в миллисекундах, поэтому 1.day должен быть 1.day * 1000
- Параметр pointStart должен быть в миллисекундах UTC, поэтому значение 10.days.ago должно быть 10.days.ago.getutc.to_i * 1000.
- areapline должен быть серии
Это рисует даты на оси х.