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

Question

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

我遇到了这些错误：

Uncaught Highcharts error #16 在 app/assets/javascripts/application.js Uncaught TypeError: undefined is not a function 在 app/assets/javascripts/graphique_repartition_budgetaire

Highcharts 说错误 16 是因为：

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

但我不知道 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

中的代码（来自 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"。换句话说，错误也会发生在不使用 javascript Highcharts.

的页面上

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

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

我做了这个简单的 test 来检查 jquery 是否正常工作。它失败了。它不会在我的页面上显示 "TEST"。所以肯定是jquery和Rails3.2有问题。我在 Whosebug 上看到有些人在 jquery 工作时也遇到了问题。但我暂时没有找到任何可行的解决方案。

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

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

之前，它无法正常工作

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

所以 JQuery 工作得很好。该问题与 Highcharts 库明确相关。

Answer 1

好的，我发现当您执行 rake assets:precompile 时 rails 中存在一个错误，它会导致包含来自 app/assets 和 public/assets 的 JS 代码的两倍.

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

作为解决方法，我只是：

运行 rake assets:clean
将行 //= require highcharts 添加到 app/assets/javascripts/application.js
运行 rake assets:precompile
从app/assets/javascripts/application.js[=41中删除行//= require highcharts =]

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

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

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

=== 编辑 1 ===

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

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

Why is Highchart loaded twice in my rails app ? (Uncaught Highcharts error #16)

javascript

jquery

highcharts

ruby-on-rails-3.2

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

Why is Highchart loaded twice in my rails app ? (Uncaught Highcharts error #16)

javascript

jquery

highcharts

ruby-on-rails-3.2

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