5

有谁知道如何在 Rails 中创建图表。这是因为我需要在 rails 中阅读和呈现统计数据，而呈现统计数据的最佳方式是在图表中。那么谁能告诉我我该怎么做？谢谢！:)

4

5 回答 5

5

这里有很多选择。要尝试将内容保留在 Ruby 中，我建议您查看ruport gem。请注意，Ruport 的最后一个版本是在 2007 年。

正如 Calvin 提到的，其他选项涉及 Javascript 解决方案。有两个我喜欢的库。第一个是 D3.js，可以在这里找到：

http://d3js.org/

D3 非常灵活，并且有一些强大的数据操作工具来处理您的数据，但是它往往需要更多的开发时间来获得一些好的东西。

我推荐的另一个选项是 highcharts：

http://www.highcharts.com/

这个库不像 D3 那样灵活，但它更容易获得一个非常漂亮的图表并快速运行。另一件事是它实际上没有 D3 拥有的数据操作工具。不过，如果您正在寻找简单的东西，我建议您先尝试 Highcharts。

于 2012-07-19T15:45:39.213 回答
3

我一直在使用一个名为jqPLot的 JavaScript 库。这很容易上手——基本上，你通过 JS 初始化图表。但是，在那个 JS 中，您可以使用 rails 脚本标签 <% %> 来构建必要的数据数组来提供购物车。显然还有其他方法可以加载数据。

作为一个简单的示例，这将是您的 html 页面（称为 graph.html.erb）。渲染这个页面的控制器需要设置@user_stats 变量，所以它可以用来为jqPlot 构建数据集。

    <html>
        <head>
        <script type="text/javascript">
            $(document).ready(function() {
              var plot2 = $.jqplot('chartdiv',
                  <% 
                     last_one = @user_stats.pop
                  %>
                  [[
                  <% @user_stats.each { |user_stat| %>
                    [<%= user_stat[1] %>, '<%= user_stat[0].first_name %>'],
                  <% } %>
                    [<%= last_one[1] %>, '<%= last_one[0].first_name %>']
                  ]],
                  {
                seriesDefaults: {
                  renderer:$.jqplot.BarRenderer,
                  // Show point labels to the right ('e'ast) of each bar.
                  // edgeTolerance of -15 allows labels flow outside the grid
                  // up to 15 pixels.  If they flow out more than that, they
                  // will be hidden.
                  pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                  // Rotate the bar shadow as if bar is lit from top right.
                  shadowAngle: 135,
                  // Here's where we tell the chart it is oriented horizontally.
                  rendererOptions: {
                    barDirection: 'horizontal'
                  }
                },
                axes: {
                  yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                  }
                }
              });
    </script>
</head>
<body>

    <div id="chartdiv" style="height:400px;width:300px;"></div>

</body>
</html>
于 2012-07-19T15:41:13.150 回答
2

完成此操作的最佳方法是使用Google Chart Tool。他们有很多常用的图表类型可供使用，所以我先看一下。

这是您的代码可能是什么样子的快速示例

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChartRepublican);

function drawChartRepublican() {

    // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Newt Gingrich', <%= @gingrich_today %>],
    ['Mitt Romney', <%= @romney_today %>], 
    ['Ron Paul', <%= @paul_today %>],
    ['Rick Perry', <%= @perry_today %>],
    ['Michelle Bachmann', <%= @bachmann_today %>],
    ['Rick Santorum', <%= @santorum_today %>],
    ['John Huntsman', <%= @huntsman_today %>], 
    ['Buddy Roemer', <%= @roemer_today %>]
  ]);

  // Set chart options
  var options = {'title':'Scoreboard (<%= DateTime.now %>)', 'width':680, 'height':480};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div_republican'));
    chart.draw(data, options);
}

在视图中，您可以通过这种方式添加图表。

<div id="chart_div_republican"></div>
于 2012-07-19T15:40:53.890 回答
2

我在寻找在我自己的 Rails 应用程序中做一些图表时遇到了你的问题。

我建议看看 Chartkick，在这里：http ://ankane.github.io/chartkick/

它相对较新，因此在您提出原始问题时不可用。它将 Google 图表 API 包装在一个简单的 Rails gem 中（如果您愿意，您也可以将其指向使用 Highcharts 核心）。我能够在几个小时内整理出一些基本图表......一个巨大的优势是我不必编写任何 JavaScript 来让它工作。我确实必须编写一些 SQL 才能正确显示数据标签，因为我要提取的数据分布在多个表中。

祝你好运！

于 2013-08-29T21:18:58.797 回答
1

您可能应该为图表使用 Javascript。从技术上讲，您可以使用 Rails 和一些 HTML/CSS 创建它们，但您的视图会有点复杂。

我认为最好的方法是使用 Rails 渲染 JSON 数据，然后将该 JSON 数据导入到Flot等 JS 库中以渲染实际图形。

于 2012-07-19T15:36:10.780 回答