1

我正在关注 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 新手，所以我不确定如何调试它。我敢肯定这是我想念的简单的东西。

谢谢！

4

4 回答 4

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']
})
于 2013-09-07T07:25:57.607 回答
1

如果使用的是简单的 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/

于 2014-10-01T10:13:42.557 回答
0

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

于 2013-10-16T19:55:06.373 回答
0

没有什么只是删除 //= 需要 turbolinks 。这已通过问题解决

于 2015-05-05T06:10:05.483 回答