如何上線圖表這些數據？

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行。

我玩過「先知」並沒有取得太大的成功。任何人都可以提供任何建議/例子/參考繪製類似的數據使用先知或其他任何東西？

謝謝。

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的海軍報了這樣的事情：

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