Rails 中的 Morris.js 问题答案

【问题标题】：Morris.js issue in RailsRails 中的 Morris.js 问题
【发布时间】：2015-05-05 14:10:05
【问题描述】：

我正在关注 Railscast #223，尝试使用 Morris.js 和 Raphael 在我的 Rails 3.2.9 站点中添加一些简单的折线图。我已经下载了 raphael 和 morris javascript 文件并将它们添加到 vendor/assets/javascripts 文件夹，然后将相关行添加到 application.js：

//= require raphael
//= require morris

然后我为图表创建了一个简单的 HTML div：

<div id="annual"></div>

并将相关的 CoffeeScript 添加到相关的 javascript 文件（tenants.js.coffee）中：

jQuery ->
    Morris.Line
        element: 'annual'
        data: [
            {y: '2012', a: 100}
            {y: '2011', a: 75}
            {y: '2010', a: 50}
            {y: '2009', a: 75}
            {y: '2008', a: 50}
            {y: '2007', a: 75}
            {y: '2006', a: 100}
        ]
        xkey: 'y'
        ykeys: ['a']
        labels: ['Series A']

页面加载正常，但没有生成图表。我是 CoffeeScript 新手，所以我不确定如何调试它。我确定这是我缺少的一些简单的东西。

谢谢！

【问题讨论】：

JavaScript 控制台中的任何错误？你也包括jQuery吗？
没有错误。我在 Rails 中使用预打包的 jQuery。
您确定<div id="annual"> 在页面上并且您的tenants.js.coffee 正在加载吗？你确定你的 CoffeeScript 中的缩进是正确的吗？大多数人在 CoffeeScript 中使用空格来缩进，因为它对空格非常敏感。
我确定 div 在页面上。我尝试过空格与制表符，但仍然没有运气。如何检查是否正在加载咖啡脚本文件？根据我的服务器日志，Tenants.js 是。
您可以随时将一个简单的console.log 调用发送到tenants.js.coffee（比如一个在jQuery -> 内部，一个在外部），以查看正在加载和运行的内容。这至少可以让您快速轻松地查看正在运行的内容。

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

【解决方案1】：

在 CoffeeScript 中试试这个解决方案：

Morris.Line({
  element: 'annual'
  data: [
    {y: '2012', a: 100}
    {y: '2011', a: 75}
    {y: '2010', a: 50}
    {y: '2009', a: 75}
    {y: '2008', a: 50}
    {y: '2007', a: 75}
    {y: '2006', a: 100}
  ]
  xkey: 'y'
  ykeys: ['a']
  labels: ['Series A']
})

【讨论】：

【解决方案2】：

如果是使用简单的js文件，例如annual.js，有使用代码：

jQuery(function() {
  return Morris.Line({
    element: 'annual',
    data: [
      {y: '2012', a: 100},
      {y: '2011', a: 80},
      {y: '2010', a: 75},
      {y: '2009', a: 70},
      {y: '2008', a: 65},
      {y: '2007', a: 60},
      {y: '2006', a: 55}
      ],
    xkey: 'y',
    ykeys: ['a'],
    labels: ['Series A']
  });
});

用于将 js 转换为咖啡 = http://js2coffee.org/

【讨论】：

【解决方案3】：

确保您的 CoffeeScript 缩进（间距）正确。

【讨论】：

【解决方案4】：

没有什么只是删除 //= 需要涡轮链接 .这个问题解决了

【讨论】：