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或其他任何东西提供任何建议/示例/参考来绘制类似的数据吗？

感谢。

Answer 1

尝试lazy_high_charts gem。

#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仅对non-commercial use免费。这对你来说可能是也可能不是一个破坏者。

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]]

如何折线图这个数据？

2 个答案: