Question

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

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

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

然而，它没有显示图表，只是一个空白区域，并出现错误说：未捕获错误：找不到图形容器元素。

所以，我找到了tiraeth的潜在解决方案，说明了

JavaScript的代码在DOM包含#annual之前执行元件。将javascript放在div之后或使用jQuery.ready（）。

那么，我怎么能把javascript放在页面内容之后呢？我很困惑资产管道是否允许我这样做。

此外，我已经看到railscast教程确实显示了morris图表而没有弄乱applicaiton.js文件，只是简单地添加// = require morris和// =需要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...
});

或coffeescript：

$ ->
  # code goes here...

Rails - Morris图表没有显示

1 个答案: