amcharts与Ruby on Rails集成：使用数据库中的数据填充图形

Question

我是RoR的新手，我正在使用amcharts在Ruby on Rails应用程序中创建图形（我正在使用rails -v 3.2 .2和amcharts JavaScript图表-v 2.6.5）来绘制我的数据库中的数据。 Amcharts不再使用Flash（现在它们只使用Javascript/HTML5），所以我发现的integration tutorials适用于旧版本的amcharts。我的第一个问题是（高级理解问题） - 我是否需要使用XML或.CSV文件从我的数据库加载数据到图表中，或者我可以在JavaScript中使用嵌入式ruby吗？

我的第二个问题 - 没有人知道任何教程或示例代码如何在Ruby on Rails中实现从数据库中提取数据的amchart图表吗？

例如：

如果我想要一个具有国家和价值的饼图。示例数据库表：

create_table "countries", :force => true do |t| 
t.string "name" 
t.integer "litres" 
t.datetime "created_at", :null => false 
t.datetime "updated_at", :null => false 
end 

这是一个硬编码图。我可以使用嵌入式ruby使代码从数据库中提取数据而不是硬编码吗？或者我需要制作一个XML文件？任何有关如何将数据从数据库中拉入到amcharts javascript代码的深入了解将非常感谢。

<script type="text/javascript"> 
     var chart; 
     var legend; 

     var chartData = [{ 
      country: "Lithuania", 
      value: 260 
     }, { 
      country: "Ireland", 
      value: 201 
     }, { 
      country: "Germany", 
      value: 65 
     }, { 
      country: "Australia", 
      value: 39 
     }, { 
      country: "UK", 
      value: 19 
     }, { 
      country: "Latvia", 
      value: 10 
     }]; 

     AmCharts.ready(function() { 
      // PIE CHART 
      chart = new AmCharts.AmPieChart(); 
      chart.dataProvider = chartData; 
      chart.titleField = "country"; 
      chart.valueField = "value"; 
      chart.outlineColor = "#FFFFFF"; 
      chart.outlineAlpha = 0.8; 
      chart.outlineThickness = 2; 
      // this makes the chart 3D 
      chart.depth3D = 15; 
      chart.angle = 30; 

      // WRITE 
      chart.write("chartdiv"); 
     }); 
    </script> 

Answer 1

你可以很容易地只使用Ruby代码来拉你的视图中的数据，并输出必要的Javascript，寿这可能是痛苦的复杂数据结构特别打造。

我会建议使用单独的JSON局部视图来使用JBuilder输出图形的数据。一旦你建立了你的JSON响应，你可以将它输出到你的图中。

# controller 
@data = Country.all 

# partial "_data.json.erb" 
<%= 
    Jbuilder.encode do |json| 
     json.countries @data do |json, country| 
     json.country country.name 
     json.value country.litres 
     end 
    end 
%> 

# view 
var chartData = <%= render :partial => "data", :format => :json, :locals => @data %> 

而且还有一个amchart宝石，我发现好像没有在3年多https://github.com/ahobson/ambling

Answer 2

感动我个人推荐使用Highcharts Highcahrts，可以帮助你，寿外观。它有一个完整的api文档，使您能够将数据加载到highcharts。下面是一个饼图示例，您可能正在寻找http://www.highcharts.com/demo/pie-basic。你可以尝试做一些这样的：

控制器

def index 
@title = "Country" 
@country = Country.all 
@data = [] 

Country.all.each do |country| 
    countryData = { :CountryName => country.country.to_s, 

    :values => [] } 

['England', 'France', 'Italy', 'Spain','Germany'].each do |NameOfCountry| 
    end 

    @data.push(countryData) #Push this data back to the variable countryData. 
end 

末

查看

如果使用highcharts你可能有一些基本的东西，类似于此：

series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [ 
        ['Firefox', 45.0], 
        ['IE',  26.8], 

但上述只是原始的静态数据。采取一些什么我提供你很可能做这样的事情的。

name: '<%= data[ :CountryName] %>', 
data: [<% data[ :values ].each do |value| %> 
     <%= value %>, 
    <% end %>] 

你可以做的是在这里分析的国家或地区名称的数据，以及您在喂值希望这有助于。

回应您的问题，您不一定非要使用XML或CSV数据。你通常使用的是JSON或XML来加载你的数据。

Answer 3

这里是amCharts V3的Ruby包装：http://rubygems.org/gems/amcharts.rb