Question

我是铁杆新手。我想用我的数据库表中的数据填充chart.js图表。我设法用静态数据设置图表。

我需要用表销售中的数据替换静态数据。 sales.month应代表x轴，sales.amount应代表y轴值。

我的app.js.coffee看起来像这样：

sales = sale.select(month, SUM(amount) as sum_of_amount)
months = sales.collect(month)
amts = sales.collect(sum_of_amount)

jQuery ->

  data = {
    labels : months,
    datasets : [
      {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : amts
      }
    ]
  }

我的index.html.haml看起来像这样，图表显示静态存储区。

%canvas#canvas{:height => "400", :width => "600"}

我如何从这里开始？

感谢。

Answer 1

好的，问题是没有数据传递到coffeescript。

我使用gem'gon'完成了这项工作。这是我做的：

我的app.js.coffee文件如下所示：

jQuery ->
months = $.map( gon.sales, ( val, i ) -> 
            val.month
          );
amts = $.map( gon.sales, ( val, i ) -> 
            val.amount
          );

data = {
  labels : months,
  datasets : [
    {
      fillColor : "rgba(151,187,205,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      pointColor : "rgba(151,187,205,1)",
      pointStrokeColor : "#fff",
      data : amts
    }
  ]
}

在我的sales_controller.rb中，我添加了以下内容：

def index
  @sales = Sale.all
  gon.sales = @sales
end

在我的application.html.haml布局文件中：

= include_gon

当然在Gemfile中：

gem 'gon'

最后在index.html.haml：

%canvas#canvas{:height => "400", :width => "600"}

现在，图表会动态填充销售表中的数据。

Answer 2

您需要通过created_at个月的分组来获取金额总和。

orders = Order.select("DATE_TRUNC('month', created_at) as month, SUM(amount) as sum_of_amount").group("month")
months = orders.collect(&:month)
amts = orders.collect(&:sum_of_amount)

现在您只需要months中的labels:和amts中的data:传递。

祝你好运！

Rails chart.js数据咖啡脚本

2 个答案: