1

我是 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​​ 吗？

我的第二个问题 - 有人知道如何在 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>
4

3 回答 3

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

于 2012-03-29T03:21:38.487 回答
1

我个人建议使用 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 来加载数据。

于 2012-03-29T09:20:07.633 回答
1

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

于 2013-10-14T06:47:07.810 回答