如何修复与High图表的原型冲突？

Question

我有一个AJAX操作，并试图同时使用High图表，这就是为什么我需要包含原型。

下面是我的代码，但没有显示高图图：

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="contain" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

以下是信息：http://jsfiddle.net/dhdSL/4/

当然，在没有原型的情况下是100%工作的：http://jsfiddle.net/dhdSL/5/

我试过jQuery.noConflict();，没有显示高海图http://jsfiddle.net/dhdSL/6/

并且尝试了$.noConflict();，并且没有显示高图图http://jsfiddle.net/dhdSL/7/

我在堆栈溢出搜索一个答案，博客，Facebook，书籍，谷歌，花了六个月，仍然找不到答案。

我尝试在所有版本中更改原型，但仍然无法工作，并且在控制台中没有显示错误。

据一位朋友告诉我，最后要包括noConflict，但是没有显示在google浏览器中，并且显示了一个错误：http://jsfiddle.net/dhdSL/8/

​

当打开错误时，我将得到另一个错误：

​

​

Answer 1

将您的jQuery封装到一个匿名函数中，以保护变量不受Prototype的干扰。http://jsfiddle.net/amyamy86/s6ms3/

(function($) {

    $.noConflict();
    $(function () {
        $('#contain').highcharts({
         ....
        });
     });

}(jQuery));