javascript - amcharts 与 Ruby on Rails 的集成 : Using data from the database to populate the graph

Question

我是 RoR 的新手，我希望使用 amcharts 在我的 Ruby on Rails 应用程序中创建一个图表(我使用的是 rails -v 3.2.2 和 amcharts JavaScript Charts -v 2.6.5)来绘制来 self 的数据库。 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 代码提取数据并在您的 View 中输出必要的 Javascript，但这在构建过程中可能会很痛苦，尤其是对于复杂的数据结构。

我建议使用单独的 JSON 局部 View 来输出图形数据 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