Rails - 莫里斯图没有出现

Question

我是 Rails 的新手，目前正在尝试开发自己项目的前端。

我想使用 MorrisJs 来显示图表，所以我使用了“morrisjs-rails”和“raphael-rails”gem，并且在 application.js 文件中需要 morris 和 raphael。

然后，我尝试按照railscast的教程：(Youtube Link Here)，我从morrisjs官网复制示例代码并通过js2coffee2.0将其翻译成CoffeeScript，并在application/assets/javascripts下创建一个名为chart.js.coffee的文件。此外，在我的 html 文件中添加了一个元素 - <div id="myfirstchart" style="height: 150px;"></div>

但是，它并没有显示图表，只是一个空白区域，并且报错说：Uncaught error: Graph container element not found。

所以，我从tiraeth 找到了一个潜在的解决方案，说是

JavaScript 的代码在 DOM 包含 #annual 之前被执行 元素。将 javascript 放在 div 之后或使用 jQuery.ready()。

那么，如何将 javascript 放在页面内容之后？我对资产管道是否允许我这样做感到困惑。

此外，我已经看到 railscast 教程确实正确地显示了 morris 图表，而不会弄乱 applicaiton.js 文件，而只是在其中添加了 //= require morris 和 //= require raphael。我想知道为什么我在做同样的事情时不能正确显示它？

仅供参考，我的 application.js 就像

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
.. require something else ..
//= require raphael
//= require morris
//= require_tree .

更新 以下是我chart.js.coffee的代码。它没有得到未捕获的错误，但仍然显示空白区域。

  $ ->
  new (Morris.Line)(
    element: 'myfirstchart'
    data: [
      {
        year: '2008'
        value: 20
      }
      {
        year: '2009'
        value: 10
      }
      {
        year: '2010'
        value: 5
      }
      {
        year: '2011'
        value: 5
      }
      {
        year: '2012'
        value: 20
      }
    ]
    xkey: 'year'
    ykeys: [ 'value' ]
    labels: [ 'Value' ])
  return

感谢您阅读我的问题，并感谢您提出任何意见和建议。谢谢。

Answer 1

如果您在调用图表之前不等待 DOM 加载，则容器元素将不存在。您需要将 chart.js 中的代码包装在文档就绪标签中。如果您使用的是 jquery：

$(document).ready(function() {
  // code goes here...
});

或咖啡脚本：

$ ->
  # code goes here...