5

Railsでグラフを作成する方法を知っている人はいますか? これは、レールで統計を読み取って提示する必要があり、統計を提示する最良の方法はグラフにあるためです。では、どうすればよいか教えてもらえますか？ありがとう！:)

4

5 に答える 5

5

ここには多くのオプションがあります。Ruby 内で物事を維持しようとするために、 ruport gemをチェックすることをお勧めします。Ruport の最後のリリースは 2007 年であることに注意してください。

Calvin が述べたように、他のオプションには Javascript ソリューションが含まれます。私が好きな図書館は二つあります。1 つ目は D3.js で、次の場所にあります。

http://d3js.org/

D3 は非常に柔軟性があり、データを操作するための強力なデータ操作ツールがいくつかありますが、優れたものを得るには開発に時間がかかる傾向があります。

私がお勧めするもう 1 つのオプションは、ハイチャートです。

http://www.highcharts.com/

このライブラリは D3 ほど柔軟ではありませんが、非常にきれいなチャートをすばやく作成して実行するのははるかに簡単です。もう 1 つのことは、D3 が持っているデータ操作ツールを実際には持っていないということです。シンプルなものを探している場合は、最初に Highcharts を試すことをお勧めします。

于 2012-07-19T15:45:39.213 に答える
3

jqPLotという JavaScript ライブラリを使用しています。理解するのは非常に簡単です。基本的には、JS を使用してチャートを初期化します。ただし、その JS では、レール スクリプト タグ <% %> を使用して、カートにフィードするために必要なデータの配列を作成できます。明らかに、データをロードする他の方法もあります。

簡単な例として、これは 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 に答える
1

おそらく、グラフには Javascript を使用する必要があります。技術的には、Rails と HTML/CSS を使用してそれらを作成できますが、ビューは少し複雑になります。

Rails を使用して JSON データをレンダリングし、その JSON データをFlotなどの JS ライブラリにインポートして実際のグラフをレンダリングするのが最善の方法だと思います。

于 2012-07-19T15:36:10.780 に答える