如何在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中创建图形？

回答

相关问题