ruby on rails-如何绘制此数据的折线图

Question

我想为以下数据创建折线图。我还希望能够将鼠标悬停在每个数据点上，查看该数据点的x和y值。我有以下数据结构：

x[0] = [23 4 2 2 4 4 5 3 334 2]
y[0] = [6 24 1 2 2 5 1 3 8 0]
x[1] = [5 6 8 6 3 4 6 3 3]
y[1] = [9 7 8 6 3 4 1 9 2]
x[2] = [6 9 9 6 2 5 8 3]
y[2] = [1 0 2 5 6 2 1 5]

这样我在同一张图表上就有3行了。

我玩"Seer"没有取得多大成功。有人能为使用Seer或其他任何东西绘制类似数据提供任何建议/示例/参考吗？

谢谢。

Answer 1

试试lazy_high_charts宝石。

#app/views/layouts/appliction.*
= javascript_include_tag 'highcharts.js'
#Gemfile
gem 'lazy_high_charts'
# my_controller#my_action
x_0 = [23, 4, 2, 2, 4, 4, 5, 3, 334, 2]
y_0= [6, 24, 1, 2, 2, 5, 1, 3, 8, 0]
x_1 = [5, 6, 8, 6, 3, 4, 6, 3, 3]
y_1 = [9, 7, 8, 6, 3, 4, 1, 9, 2]
x_2 = [6, 9, 9, 6, 2, 5, 8, 3]
y_2 = [1, 0, 2, 5, 6, 2, 1, 5]

data_0  = x_0.zip(y_0)
data_1 = x_1.zip(y_1)
data_2  = x_2.zip(y_2)
@h = LazyHighCharts::HighChart.new('graph') do |f|
    f.series(:name => "xy0", :data => data_0)
    f.series(:name => "xy1", :data => data_1)
    f.series(:name => "xy3", :data => data_2)
    f.chart({:defaultSeriesType=>"line" })
    f.yAxis(:title => { :text => "y axis values" } )
    f.xAxis(:title => { :text => "x axis values"} )
    f.title(:text => "XY Graph")
    f.plotOptions({}) # override the default values that lazy_high_charts puts there
    f.legend({}) # override the default values 
end
#app/views/my_controller/my_action
= high_chart("chart", @h)

洞穴：

HighCharts仅对非商业用途免费。这可能会也可能不会破坏你的交易。

Answer 2

我真的很喜欢jQuery flot的这种东西：

http://code.google.com/p/flot/

看看这里的例子：

http://flot.googlecode.com/svn/trunk/README.txt

在您的控制器或视图中，如果需要，您可以使用Ruby的zip将x和y值的数组压缩在一起：

> a = [1,2,3]
 => [1, 2, 3] 
> b = [5,6,7]
 => [5, 6, 7] 
> a.zip(b)
 => [[1, 5], [2, 6], [3, 7]]