Rails chart.js 数据咖啡脚本

Question

我是 Rails 新手。我想用我的数据库表中的数据填充 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

好的，问题是没有数据传递到咖啡脚本中。

我设法使用 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)

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

祝你好运！