javascript - 为什么 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 图表示例函数的 View 本身的错误(尽管当然会在每个页面上调用 Highcharts.js)。 问题应该出在其他地方。

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

我让这个变得简单了 test检查 jquery 是否正常工作。 它失败了。它不会在我的页面上显示“测试”。 所以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 时，rails 中存在一个错误，它会导致包含来自 app/assets 和 public/assets 的 JS 代码的两倍。

此错误已被引用 here自 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
5. 删除 //= require highcharts 行

因此 Highchart 库是在来自 public/assets 的 Assets 管道中预编译的。

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

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

=== 编辑 1 ===

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