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

问题描述：

我是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吗？amcharts与Ruby on Rails集成：使用数据库中的数据填充图形

我的第二个问题 - 没有人知道任何教程或示例代码如何在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>

答

你可以很容易地只使用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

谢谢，这是非常有帮助的。当我有一些时间时，我会尽力在周末实现这一点。 – diasks2 2012-03-29 14:29:55

我做了一个教程，如果任何人有类似的问题：[Ruby on Rails教程 - 一个动态amCharts图]（http://www.diasks2.com/post/21827658042/ruby-on-rails-tutorial-a-dynamic-amcharts -graph） – diasks2 2012-06-29 14:50:52

@ diasks2 - 你的教程非常方便。谢谢：）。我无法找到您的博客评论部分，因此我在这里发布。 – boddhisattva 2013-09-14 14:34:48

答

感动我个人推荐使用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来加载你的数据。

谢谢你的信息，这是非常有用的。我没有尝试过高分辨率图表的原因之一是我最终需要使用雷达图（蜘蛛图），我认为highcharts还不支持这种类型的图。虽然从他们论坛上的评论看来，它可能计划在2012年春季[Highcharts客户反馈论坛]（http://highcharts.uservoice.com/forums/55896-general/suggestions/724214-radar-plot）。 – diasks2 2012-03-29 14:36:50

答

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

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

相关推荐