如何在Rails中创建图形？
有人知道如何在Rails中创建图形吗？这是因为我需要在rails中读取和表示统计数据，而表示统计数据的最好方法是用图形表示。那么谁能告诉我该怎么做呢？谢谢！:)
回答 5
Stack Overflow用户
发布于 2012-07-19 23:45:39
这里有很多选择。为了尽量保持ruport中的内容，我建议您查看Ruby。请注意，Ruport的上一次发布是在2007年。
正如Calvin提到的，其他选项涉及Javascript解决方案。我喜欢两个库。第一个是D3.js，可以在这里找到：
http://d3js.org/
D3非常灵活，并且有一些强大的数据操作工具来处理您的数据，但是它往往需要更多的开发时间才能获得更好的结果。
我推荐的另一个选项是highcharts：
http://www.highcharts.com/
这个库不像D3那样灵活，但它更容易创建一个非常漂亮的图表并快速运行。另一件事是，它并不真正拥有D3拥有的数据操作工具。如果你正在寻找一些简单的东西，我建议你先试试Highcharts。
Stack Overflow用户
发布于 2012-07-19 23:41:13
我一直在使用一个名为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>Stack Overflow用户
发布于 2012-07-19 23:40:54
完成此任务的最好方法是使用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>https://stackoverflow.com/questions/11564192
复制相似问题
腾讯云开发者
