如何实现时间序列，红宝石上的可缩放高图

Question

I'd like to achieve time series, zoomable highcharts,like following picture, on ruby. http://www.highcharts.com/demo/line-time-series

I've achieved the following line chart using lazy_high_charts However I have no idea how to get the time series chart. Could you tell me how to solve the problem?

def show
  @graph = LazyHighCharts::HighChart.new('graph') do |f|
    f.title(text: 'A/B Price')
    f.xAxis(categories: @date_array)
    f.plotOptions(line: {marker: {enabled: false}})
    f.series(name: 'A/B', data: @rate_array)
  end
end

Answer 1

You need to add some area attributes to your plotOptions . A very simple example would be:

f.plotOptions(line:{marker: {enabled: false}}, area: {fillColor: '#000000'})

A more complex example is link on http://www.highcharts.com/demo/line-time-series :

area: {
    fillColor: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, Highcharts.getOptions().colors[0]],
            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
    },
    marker: {
        radius: 2
    },
    lineWidth: 1,
    states: {
        hover: {
            lineWidth: 1
        }
    },
    threshold: null
}

Answer 2

By writing as following, I've got the chart like attached picture.

@graph = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(text: 'A/B')
  f.xAxis(categories: @date_array)
  f.yAxis(title: {text: 'Exchange rate'})
  f.chart(
    type: "area",
    zoomType: 'x'
  )
  f.plotOptions(
    area: {
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
              [0, "rgb(255, 255, 255)"],
              [1, "rgb(240, 240, 255)"]
            ]
        },
        marker: {
            radius: 1
        },
        lineWidth: 1,
        states: {
            hover: {
                lineWidth: 1
            }
        },
        threshold: nil
    }
  )
  f.series(name: 'A/B', data: @rate_array)

Answer 3

Two things:

1) f.xAxis(categories: @date_array) - creates an array of categories, while you need f.xAxis(:type=> "datetime") instead. Also, @rate_array should be an array of arrays, like this:

[ [date_1, value_1], [date_2, value_2], ... ]

2) Change type from line to area , for example:

f.series(:type=> "area", :name=> 'A/B', :data=> @rate_array)