为什么Highchart在我的rails应用程序中加载了两次？ （Uncaught Highcharts错误＃16）

Question

我无法使用Highcharts的基本示例。

我收到了这些错误：

app / assets / javascripts / application.js中的

Uncaught Highcharts error #16 app / assets / javascripts / graphique_repartition_budgetaire中的Uncaught TypeError: undefined is not a function

Highcharts说错误16是因为：

  

第二次加载Highcharts或Highstock时会发生此错误   在同一页面中，因此已经定义了Highcharts命名空间。保持   记住Highcharts.Chart构造函数和所有功能   Highstock包含在Highstock中，因此如果您正在运行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

我将它放入我的app / 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 / graphique_repartition_budgetaire.js的代码（frome 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的网页上也会出现此错误：＃graphique-repartition-budgetaire＆＃34;。 换句话说，错误也发生在不使用javascript Highcharts的网页上。

所以这排除了调用javascript图表示例函数的视图本身的错误（尽管Highcharts.js当然是在每个页面上调用）。 问题应该在其他地方。

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

我做了这个简单的test来检查jquery是否正常工作。 它失败了。它没有显示＆＃34; TEST＆＃34;在我的页面上。 所以jquery和Rails 3.2一定存在问题。 我在stackoverflow上看到，有些人也有问题让jquery工作。但我现在找不到任何可行的解决方案。

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

推荐test有问题。直到我将脚本保存到文件app / assets / javascript / display_my_div.js并将其更改为：

之后，它才能工作

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

所以JQuery的工作就像一个魅力。这个问题与Highcharts图书馆有明确的联系。

Answer 1

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

自2013年4月以来，此错误被引用here，但rails社区似乎不愿意更正错误。

作为解决方法，我只是：

1. 运行rake assets:clean
2. 将行//= require highcharts添加到 应用/资产/ Javascript角/ application.js中
3. 运行rake assets:precompile
4. 删除 app / assets / javascripts / application.js
中的//= require highcharts行

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

它有点奇怪，但它有效......在开发中......

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

===编辑1 ===

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