如何在 ruby 上实现时间序列、可缩放的高图答案

【问题标题】：How to achieve Time series, zoomable highcharts on ruby如何在 ruby 上实现时间序列、可缩放的高图
【发布时间】：2016-02-29 15:17:37
【问题描述】：

我想在 ruby 上实现时间序列、可缩放的高图，如下图所示。 http://www.highcharts.com/demo/line-time-series

我已经使用lazy_high_charts 实现了以下折线图但是我不知道如何获得时间序列图。你能告诉我如何解决这个问题吗？

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

【问题讨论】：

秒图到底有什么问题？
我想在线条下方填充颜色。 highcharts.com/demo/line-time-series

标签： javascript ruby-on-rails ruby highcharts

【解决方案1】：

两件事：

1) f.xAxis(categories: @date_array) - 创建一个类别数组，而您需要 f.xAxis(:type=> "datetime")。另外，@rate_array 应该是一个数组数组，像这样：

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

2) 将类型从line 更改为area，例如：

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

【讨论】：

【解决方案2】：

您需要为您的plotOptions 添加一些area 属性。一个非常简单的例子是：

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

一个更复杂的例子是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
}

【讨论】：

谢谢@spickermann。但是，f.plotOptions(line:{marker: {enabled: false}}, area: {fillColor: '#000000'}) 没有返回填充区域。

【解决方案3】：

通过以下方式，我得到了如附图所示的图表。

@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)

【讨论】：