Question

我是RoR的新手，我希望使用amcharts在我的Ruby on Rails应用程序中创建一个图形（我使用rails -v 3.2.2和amcharts JavaScript Charts -v 2.6.5）来绘制来自我的数据库。 Amcharts不再使用flash（现在他们只使用Javascript / HTML5），因此我找到的integration tutorials适用于较旧版本的amcharts。

我的第一个问题是（高级别理解问题） - 我是否需要使用XML或.CSV文件将数据从我的数据库加载到图表中，或者我可以在javascript中使用嵌入式ruby？

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

例如：

如果我想要一个包含国家/地区和价值的饼图。示例数据库表：

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 gem，看起来它已经超过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 %>]

您可以在此处执行的操作是解析CountryName的数据以及您输入的值。希望这会有所帮助。

在回答您的问题时，您不一定非必须使用XML或CSV数据。您通常使用的是JSON或XML来加载数据。

Answer 3

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

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

3 个答案: