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