Как составить список дат (по дням) на xAxis с помощью HighCharts

Я пытаюсь отобразить даты (т. е. по дням) по оси x с помощью HighCharts. Для этого я использую гем Lazy High Charts с Rails. В качестве аргумента «данные» HighCharts я передаю вложенный массив с [[дата, доход], [дата, доход], [дата, доход]... и т. д.].

Ось y с доходом работает правильно, а соответствующая дата в оси x — нет.

Вот код контроллера:

def graph_orders

        sales_and_date_array = []

        Order.revenue_to_array(sales_and_date_array)

        puts sales_and_date_array.inspect

        # http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/

        @chart = LazyHighCharts::HighChart.new('graph') do |f|
          f.title(:text => "Lono Sales")
          f.xAxis(
            type: 'datetime'
           )

          f.series(:name => "Lono Sales Revenue", :yAxis => 0, :data => sales_and_date_array)

          f.yAxis [
            {:title => {:text => "Revenue", :margin => 70} },
            {:title => {:text => "Revenue"}, :opposite => true},
          ]

          f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',)
          f.chart({:defaultSeriesType=>"line"})
        end

    end

Вот как выглядит анализ массива sales_and_date_array:

[["2014-06-12", 208.28], ["2014-06-11", 416.56], ["2014-06-11", 624.84], ["2014-06-11", 833.12], ["2014-06-10", 1041.4], ["2014-06-09", 1249.68], ["2014-06-08", 1457.96], ["2014-06-08", 1666.24], ["2014-06-07", 1874.52], ["2014-06-07", 2082.8], ["2014-06-07", 2291.08],....etc

Вот как сейчас выглядит вывод графика:

введите здесь описание изображения

Есть предположения?


ruby ruby-on-rails highcharts lazy-high-charts
person dougiebuckets    schedule 13.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Highcharts не принимает даты в таком формате. Вы можете либо передать объект Date.UTC, либо передать дату в формате эпохи javascript (в миллисекундах).

использованная литература:

person jlbriggs    schedule 14.06.2014

arrow_upward
2
arrow_downward

Точный пример:

@chart = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(:text => 'History')
  f.xAxis(:type => 'datetime',
          :title => {
            text: 'Date'
          })
  f.yAxis(:title => {
            text: 'Values'
          })
  f.series(:name => 'Value',
           :data => YourModel
                      .map { |i| [i.created_at.to_time.to_i * 1000,
                                  i.your_value] })

  f.chart({:defaultSeriesType => 'line'})
person hlcs    schedule 26.11.2015