我是新手。我想用数据库表中的数据填充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"}
我如何从这里开始?
谢谢。
好的,问题是没有数据传递到咖啡脚本中。
我设法用宝石“ 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] 删除。
我来说两句