为什么Highchart在我的rails应用程序中加载了两次?(未捕获的Highcharts错误#16)

Question

我不能把工作作为Highcharts的基本示例。

我得到了这些错误：

app/assets/javascripts/application.js中的Uncaught Highcharts error #16app/assets/javascripts/graphice_partition_budgetaire 中的Uncaught TypeError: undefined is not a function

Highcharts表示错误16是因为：

此错误发生在第二次加载Highcharts或Highstock时在同一页中，因此Highcharts命名空间已经定义。保持请记住Highcharts。图表构造函数和的所有功能Highstock中包含Highcharts，因此如果您正在运行Chart和StockChart组合，您只需要加载highstock.js文件

但我不知道Highcharts怎么能在同一页中加载两次。

我使用的是Rails 3.2.21

我把这个放进我的Gemfile:

gem 'jquery-rails'
gem 'highcharts-rails', '~> 3.0.0'

我把它放在我的app/assets/javascripts/application.js:中

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require highcharts

我把它放进了我的应用程序/views/layouts/application.html.haml:

%html
  %head
    %title My title blablabla
    = javascript_include_tag 'application'
    = stylesheet_link_tag    'application', :media => 'screen'
    = stylesheet_link_tag    'application', :media => 'print, projection'
    /[if IE]
      = stylesheet_link_tag    'application', :media => 'screen, projection'
    = csrf_meta_tags
...

这是我认为的代码（类似HAML）：

.groupe-champs-encadres
  #graphique-repartition-budgetaire

这是我放入样式表中的内容（类似SASS）：

#graphique-repartition-budgetaire
  width: 100%
  height: 400px

这是我放入app/assets/javascripts/graphice_partition_budgetaire.js 的代码（来自Highcharts示例）

$(function () {
    $('#graphique-repartition-budgetaire').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

======编辑1======

我注意到这个错误也发生在其他不使用任何ID:#graphicurerepartitionbudgetaire的页面上"。换句话说，错误也发生在不使用javascript Highcharts的页面上。

因此，这排除了视图本身调用javascript图表示例函数的错误（当然，每个页面都会调用Highcharts.js）。问题应该出在别的地方。

======编辑2======

我做了这个简单的测试来检查jquery是否正常工作。它失败了。它不会在我的页面上显示"测试"。所以jquery和Rails3.2肯定有问题。我在stackoverflow上看到，有些人在让jquery工作时也遇到了问题。但我目前还没有找到任何有效的解决方案。

======编辑3======

建议的测试有问题。直到我将脚本保存到文件app/assets/javascript/didisplay_my_div.js中，并将其更改为：，它才起作用

$(function() {
  $('#mydiv').show();
});

所以JQuery的工作方式很有魅力。这个问题肯定与Highcharts库有关。

Answer 1

好的，我发现在执行rake assets:precompile时，rails中存在一个错误，这将导致包含两倍于app/assets和public/assets的JS代码。

自2013年4月以来，这里就提到了这个错误，但rails社区似乎不愿意纠正它

作为变通办法，我只是：

1. 运行rake assets:clean
2. 将行//= require highcharts添加到app/assets/javascripts/application.js
3. 运行rake assets:precompile
4. 从app/assets/javascripts/application.js中删除行//= require highcharts

因此，Highchart库是在公共/资产的资产管道中预先编译的。

这有点奇怪，但它有效。。。正在开发中。。。

我仍然需要在生产中测试它，以确认它是否继续工作。

===编辑1===

事实上，它比这更简单：在开发模式下，Rails会自动编译JS文件，但如果它们已经用rake:assets precompile命令预编译并压缩成一个文件（我还不记得在哪里）；那么rails将同时使用JS代码。这当然不会在生产模式中发生，因为（通常）没有激活自动编译模式（出于性能考虑）。