morris.js 图表未呈现答案

【问题标题】：morris.js graph is not renderingmorris.js 图表未呈现
【发布时间】：2017-12-12 01:15:10
【问题描述】：

我似乎无法使用 coffeescript 让 morris.js 图形在 rails 中工作。它甚至似乎没有在页面上呈现。我设法获得了教程图形渲染，这让我相信这是我的控制器的问题（并且我的 gem 文件等已正确加载），但我完全迷失了。我的控制台输出如下：

咖啡脚本

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript ruby-on-rails coffeescript morris.js

【解决方案1】：

根据文档，<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。

【讨论】：

【解决方案2】：

我遇到了这个问题。解决方法是将我想要的记录放入帮助程序中，然后在 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' ]

【讨论】：