morris.js图形未呈现

Question

I can't seem to get morris.js graph working in rails, using coffeescript. 我似乎无法使用coffeescript使morris.js图形在rails中工作。 It does not even appear to be rendering on the page. 它甚至似乎不在页面上呈现。 I have managed to get the tutorial graph rendering, which makes me believe it is an issue with my controller (and that my gem files etc are loaded correctly), but I'm totally lost. 我已经设法获得了教程图形渲染，这使我相信这是控制器的问题（我的gem文件等已正确加载），但是我完全迷失了。 My console output is below: 我的控制台输出如下：

Coffeescript 咖啡脚本

jQuery ->
      $.get '/scores/index.json', (data) ->
        Morris.Line
          element: $('#myfirstchart')
          data: data
          xkey: 'created_at'
          ykeys: ['scores']
          labels: ['Score']

index.html.erb 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 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

Any help would be hugely appreciated. 任何帮助将不胜感激。

Answer 1

According to the docs, the <script> tag should be inside the <head> section. 根据文档， <script>标记应位于<head>部分内。 In your application.html.erb : 在您的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>

See jQuery Get Started for an example. 有关示例，请参见jQuery入门。

Answer 2

I had this issue. 我有这个问题。 The fix was to put the records I wanted into a helper and then call that in the JS to render in the view. 解决方法是将我想要的记录放入帮助器中，然后在JS中调用该记录以在视图中呈现。 Get your helper to show the data in the way Morris requires then you'll be good. 让您的助手按照Morris要求的方式显示数据，那么您会很好。

Inside of a helper: 帮手内部：

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

In your view: 您认为：

<%= content_tag :div, "", style: "height: 205px", id: "scores-morris", data: {scores: chart_data} %>

And finally add your js/coffee script. 最后添加您的js / coffee脚本。 This is coffee: 这是咖啡：

$ ->
  Morris.Line
    element: 'scores-morris'
    data: $('#scores-morris').data('scores')
    xkey: 'period'
    ykeys: [ 'score' ]
    labels: [ 'SCORE!!!' ]
    hideHover: [ 'auto' ]

morris.js图形未呈现

问题描述

2 个解决方案

解决方案1
0 2017-12-12 02:51:54

解决方案2
0 2017-12-12 03:16:18

morris.js图形未呈现

问题描述

2 个解决方案

解决方案1 0 2017-12-12 02:51:54

解决方案2 0 2017-12-12 03:16:18

解决方案1
0 2017-12-12 02:51:54

解决方案2
0 2017-12-12 03:16:18