为什么Highchart会在我的Rails应用程序中加载两次？ （Uncaught Highcharts错误＃16） [英] Why is Highchart loaded twice in my rails app ? (Uncaught Highcharts error #16)

问题描述

我得到了这些错误：

Uncaught Highcharts错误＃16 在app / assets / javascripts / application.js中
Uncaught TypeError：undefined不是函数

Highcharts表示错误16是因为：

第二次发生此错误Highcharts或Highstock在同一页面中加载
，因此Highcharts名称空间已经定义。记住
，Highcharts.Chart的构造函数和
Highcharts的所有特性都包含在Highstock中，所以如果您将Chart和
StockChart组合在一起，您只需要加载highstock。 js
文件。

但我无法弄清楚Highcharts如何在同一页面加载两次。

我正在使用Rails 3.2.21

：

  gem'jquery-rails'
 gem'highcharts-rails'，'〜> 3.0.0'
  

我把这个放到我的app / assets / javascripts / application.js中： p>

  // =需要jquery 
 // =需要jquery_ujs 
 // = require_tree。 
 // =需要highcharts 
  

我把它放到我的app / views / layouts / application中.html.haml：

 ％html 
％head 
 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：{
类型：'bar'
}，
标题：{
 text：'水果消耗'
}，
 xAxis：{
类别： ['苹果'，'香蕉'，'橘子'] 
}，
 y轴心：{
 tit le：{
 text：'已吃水果'
} 
}，
系列：[{
 name：'Jane'，
 data：[1 ，0，4] 
}，{
 name：'John'，
 data：[5，7，3] 
}] 
}）; 
}）; 
  

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

我注意到这个错误也发生在没有使用任何ID的其他页面上：＃graphique-repartition-budgetaire。
换句话说，错误也发生在页面上't使用JavaScript Highcharts。

因此，这排除了视图本身的错误，其中调用了javascript图表示例函数（尽管Highcharts.js当然被称为on
问题应该在其他地方。

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

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

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

有是推荐的测试。直到我将脚本保存到文件app / assets / javascript / display_my_div.js中，并将其更改为：

  $（function（）{
 $（'＃mydiv'）。show（）; 
}）; 
  

所以JQuery像一个魅力一样工作。这个问题与Highcharts库有明确的关联。

好的，我发现在rails中有一个错误，当你执行 rake资产：预编译，这将导致包含应用/资产和公共/资产的JS代码的两倍。

自2013年4月起，bug被引用此处，但rails社区似乎并不愿意以解决它。

解决方法我只是：
$ b

1. 运行 rake assets：clean


2. 添加行 // = require highcharts to
   app / assets / javascripts / application.js
   
3. 运行 rake资产：预编译


4. 从 app / assets / javascripts / application.js 中删除​​ // =需要highcharts strong>

因此，Highchart库在资产管道中预编译来自公众/资产。

它有点奇怪，但它在开发...... ... $ /

<

===编辑1 ===

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

I can't make working the basic example of Highcharts.

I got these errors :

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

Highcharts says that the error 16 is because :

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.

But I can't figure out how can Highcharts could be loaded twice in the same page.

I'm using Rails 3.2.21

I put this into my Gemfile :

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

I put this into my app/assets/javascripts/application.js :

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

I put this into my 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
...

This is the code I have in my view (HAML-like) :

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

This is the what I put into my stylesheet (SASS-like) :

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

This is the code (frome Highcharts example) that I put into my app/assets/javascripts/graphique_repartition_budgetaire.js

$(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]
        }]
    });
});

====== EDIT 1 ======

I notice that this error also happen on other pages that don't use any ID : #graphique-repartition-budgetaire". In other words, the error also happen on pages that don't use the javascript Highcharts.

So this excludes a mistake on the view itself where the javascript chart example function is called (though the Highcharts.js is of course called on every page). The problem should lie somewhere else.

====== EDIT 2 ======

I made this simple test to check if jquery is working properly. And it fails. It doesn't display the "TEST" on my page. So there must be a problem with jquery and Rails 3.2. I saw on stackoverflow that some people also got problem making jquery working. But I did't find any working solution for now.

====== EDIT 3 ======

There is something wrong with the recommanded test. It was not working until I save the script into a file app/assets/javascript/display_my_div.js, and changed it to :

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

So JQuery is working like a charm. The problem is definitively linked with Highcharts library.

解决方案

Ok, I found that there is a bug in rails when you do a rake assets:precompile that would lead to include twice the JS code from app/assets and public/assets.

This bug is referenced here since april 2013, but the rails community don't seem to be willing to correct it.

As workaround I just :

1. run rake assets:clean
2. add the line //= require highcharts to app/assets/javascripts/application.js
3. run rake assets:precompile
4. delete the line //= require highcharts from app/assets/javascripts/application.js

So Highchart library is precompiled in assets pipeline from the public/assets.

Its a bit weird, but it works... in development...

I still have to test it in production to confirm that it continues to work.

=== EDIT 1 ===

In fact, it simpler than that : In developpement mode, Rails auto-compile your JS files, but if they were already precompiled with the rake:assets precompile command and compressed into a file (I dont remember where yet) ; then rails would use both occurence of your JS code. This would of course not happen in production mode as there is (usually) no auto-compile mode activated (for performance consideration).

这篇关于为什么Highchart会在我的Rails应用程序中加载两次？ （Uncaught Highcharts错误＃16）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！