Rails chart.js数据咖啡脚本

lan_code

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

我如何从这里开始?

谢谢。

lan_code

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

我设法用宝石“ 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"}

现在,该图表将动态填充我的销售表中的数据。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Rails角度咖啡脚本错误

来自分类Dev

Rails中的共享JS(咖啡)

来自分类Dev

Rails主干咖啡脚本ListenerId定义

来自分类Dev

Rails 4--咖啡脚本未部分执行

来自分类Dev

如何在咖啡脚本中使用Rails助手?

来自分类Dev

如何在 Rails 中的视图中加载咖啡脚本?

来自分类Dev

Chartkick/Rails:使用来自对象而不是模型的数据构建 line_chart

来自分类Dev

Rails 5 如何从咖啡脚本文件中获取 Ajax api 调用的响应到 rails 视图

来自分类Dev

chart.js不加载表数据

来自分类Dev

散点图的Chart.js点格式数据

来自分类Dev

使用获取获取Chart JS的JSON数据

来自分类Dev

使用JavaScript的Chart Js数据转换

来自分类Dev

React中的Chart JS不获取数据

来自分类Dev

chart.js不加载表数据

来自分类Dev

Chart.js数据/标签比例

来自分类Dev

数据在 chart.js 上相互叠加

来自分类Dev

GWT - native js chart

来自分类Dev

Rails Chartkick Gem Error Loading Chart No Adapter Found

来自分类Dev

Chart.js PHP 数据库数据不显示

来自分类Dev

Doughnut Chart不显示带有Chart Js和Backbone js的数据

来自分类Dev

如何从React js中的State获取Chart JS Pie Chart的数据?

来自分类Dev

Chart.js 在 Angular 上使用 @types/chart.js

来自分类Dev

Chart.js数字格式

来自分类Dev

使用Chart.js的虚线

来自分类Dev

chart.js的异常行为

来自分类Dev

Chart.js填充画布

来自分类Dev

Chart.js和PHP

来自分类Dev

Chart.js文字颜色

来自分类Dev

栏内的文本-chart.js