如何在Rails中創建圖形？

1

您應該爲您的圖表使用Javascript。你可以在技術上用Rails和HTML/CSS創建它們，但是你的觀點會變得有些複雜。

我認爲最好的方法是使用Rails來渲染JSON數據，然後將該JSON數據導入到一個JS庫（如Flot）中以渲染實際的圖。

2012-07-19 15:36:10 Calvin

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-19 15:40:53

+0

「我在這裏使用了它。」 - 鏈接已死。 – 2016-05-31 12:49:49

+0

@MateuszKonieczny它用於我的項目鏈接，但我把它關閉了。對不起，它現在消失了。 – 2016-05-31 17:40:58

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-19 15:41:13 steakchaser

5

這裏有很多選項。要嘗試保持Ruby內的東西，我建議檢查一下ruport寶石。請注意，Ruport的最後一個版本是在2007年。

正如Calvin提到的其他選項涉及JavaScript解決方案。有我喜歡的兩個圖書館。首先是D3.js並且可以在這裏找到：

http://d3js.org/

D3是非常靈活的，有一些強大的數據處理工具與您的數據的工作，但它往往需要一些更多的開發時間來獲得好東西。

我推薦另一種選擇是highcharts：

http://www.highcharts.com/

這個庫並不像D3那樣靈活，但它很容易得到一個很漂亮的圖表快速啓動和運行。另一件事是它沒有真正擁有D3所具有的數據處理工具。如果你正在尋找簡單的東西，我建議先試試Highcharts。

來源

2012-07-19 15:45:39 jklina

+0

解釋很有用。謝謝。 – 2012-07-19 17:18:25

2

我發現你的問題，同時尋找在我自己的Rails應用程序做一些圖表。

我建議考慮看看Chartkick，在這裏：http://ankane.github.io/chartkick/

這是比較新的，所以不可用，當你問你原來的問題。它將Google圖表API封裝在一個簡單的Rails gem中（如果您願意，也可以指定它使用Highcharts核心）。幾個小時後，我可以一起獲得一些基本的圖表......一個巨大的優勢是，我不必編寫任何JavaScript來使其工作。我確實需要編寫一些SQL才能使數據標籤正確出來，因爲我要拖動的數據分佈在多個表中。

祝你好運！

來源

2013-08-29 21:18:58 staxim

如何在Rails中創建圖形？

回答

相關問題