amcharts与RubyonRails的集成:使用数据库中的数据填充图形

amcharts integration with Ruby on Rails: Using data from the database to populate the graph

本文关键字：数据库 数据 填充 图形 RubyonRails 集成 amcharts      更新时间：2023-09-26

我是RoR的新手，我希望使用amcharts在我的Ruby on Rails应用程序中创建一个图形（我使用的是Rails-v 3.2.2和amcharts JavaScript Charts-v 2.6.5），以绘制数据库中的数据。Amcharts不再使用flash（现在他们只使用Javascript/HTML5），所以我找到的集成教程是针对旧版本的Amcharts的。

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

我的第二个问题是，有人知道如何在RubyonRails中实现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

我个人建议使用Highcharts Highcahrts。它有一个完整的api文档，使您能够将数据加载到高图表中。下面是一个你可能正在寻找的饼图示例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

结束

查看

如果你使用高图，你可能会有一些基本的东西，与此类似：

  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来加载数据。

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

相关文章：