Question

我想通过从数据库中检索的图表，图表来显示动态数据。有各种各样的宝石可用，如 highcharts，谷歌图表，粗暴图书馆等。任何人都可以举例说明如何从数据库中检索数据并使用它来显示使用这些宝石/库中的任何一个的图表，图表？任何帮助都会有用。

由于

Answer 1

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

<强>控制器

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并将所有相关文件放入资产中。

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

使用轨道上的ruby中的图表和图形显示动态数据

1 个答案: