ruby-on-rails-3 - 在 ruby​​ on rails 中使用图表和图形显示动态数据

Question

我想通过从数据库中检索到的图表显示动态数据。有各种可用的 gem，如highcharts、google graphs、gruff library等。任何人都可以举个例子，如何从数据库中检索数据并使用它来显示图表，使用这些 gems/libraries 中的任何一个的图表？任何帮助都会有用。

谢谢

Answer 1

好的，这是一个完美的例子。在我最近完成的一个应用程序中，我想获取所有员工及其加班时间的统计数据。然后我还得到了所有员工的总和。我决定使用highcharts。我相信最好的东西是代表图表和图形。也有非常好的文档来支持它。

控制器

class StatisticsController < ApplicationController

 def index
    @users = User.all
    @shifts = Shift.scoped
 end 
end 

index.html.erb

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    <script>
        $(function () {
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart:{
                        renderTo:'container',
                        type:'column'
                    },
                    title:{
                        text:'<%= Date.today.strftime("%B")%> Overtime'
                    },
                    xAxis:{
                        categories:[

                            '<%= Date.today.strftime("%B")%>'

                        ]
                    }, 
                    yAxis:{
                        min:0,
                        title:{
                            text:'Hours'
                        }
                    },
                    legend:{
                        layout:'vertical',
                        backgroundColor:'#FFFFFF',
                        align:'left',
                        verticalAlign:'top',
                        x:100,
                        y:70,
                        floating:true,
                        shadow:true
                    },
                    tooltip:{
                        formatter:function () {
                            return '' +
                                    'Hours' + ': ' + this.y;
                        },

                        credits:{
                            text:'SomeText.co.uk',
                            hreft:'http://wwww.putyourlinkhere.co.uk'
                        }
                    },
                    plotOptions:{
                        column:{
                            pointPadding:0.4,
                            borderWidth:0
                        }
                    },


                    series:[
                        <%@users.each do |user|%>
                        {
                            name:'<%= user.name%>',
                            data:[<%= user.shift.sum(:overtime)%>]
                        },
                        <% end %>
                        {
                            name:'Total',
                            data: [<%= @shifts.to_a.sum(&:overtime)%>],
                            color:'#FE9D00'
                        }
                    ]
                });
            });

        });
    </script>

从这个示例中，您可以看到series将表示您想要显示的数据的内容。我遍历所有用户并输出他们的名字以及他们的班次总和。再往下，我通过获取所有班次并将其放入一个数组并对加班时间求和来获取总数。

哦，您还需要下载highcharts并将所有相关文件放入您的资产中。

这应该是一个足够好的例子来让你继续前进。