morris.js图形未呈现
morris.js图形未呈现
提问于 2017-12-12 09:15:11
我似乎无法使用coffeescript在rails中运行morris.js图形。它甚至看起来都没有呈现在页面上。我已经设法获得了图形渲染教程，这让我相信这是我的控制器的问题(以及我的gem文件等被正确加载)，但我完全迷惑了。我的控制台输出如下：
Coffeescript
jQuery ->
$.get '/scores/index.json', (data) ->
Morris.Line
element: $('#myfirstchart')
data: data
xkey: 'created_at'
ykeys: ['scores']
labels: ['Score']index.html.erb
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="border:2px solid red; height: 200px; width: 100%"></div>scores_controller.rb
def index
respond_to do |format|
format.html {
# Display current users scores in the order of created at descending from most recent. Taking the last 5 scores
@scores = Score.all
}
format.json {
scores = Score.all
render :json => scores
}
end
end任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2017-12-12 10:51:55
根据文档，<script>标记应该在<head>部分内。在你的application.html.erb中
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<!-- other Rails imports -->
</head>
<body>
<%= yield %>
</body>
</html>有关示例，请参阅jQuery Get Started。
Stack Overflow用户
发布于 2017-12-12 11:16:18
我有这个问题。修复方法是将我想要的记录放到一个helper中，然后在JS中调用它以在视图中呈现。让你的助手以Morris要求的方式显示数据，这样你就会做得很好。
在帮助器内部：
def chart_data
(1.month.ago.to_date..Date.today).map do |date|
{
period: date,
score: Score.where("date(created_at) = ?", date).count,
}
end
end在您的视图中：
<%= content_tag :div, "", style: "height: 205px", id: "scores-morris", data: {scores: chart_data} %>最后添加您的js/coffee脚本。这是咖啡：
$ ->
Morris.Line
element: 'scores-morris'
data: $('#scores-morris').data('scores')
xkey: 'period'
ykeys: [ 'score' ]
labels: [ 'SCORE!!!' ]
hideHover: [ 'auto' ]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47763972
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号