ng升级两个版本的Highcharts，错误16

Posted 2021-05-05

我有一个升级的应用程序使用ngUpgrade到目前为止运行良好，但我遇到了一个问题，试图合并Highcharts。

原始应用程序包含不同版本的highcharts（AngularJS的旧版本）。

使用Angular的新（混合记忆）应用程序具有不同版本的highcharts。

当两者都使用时，我遇到错误＃16，Highcharts已经实例化，这是有道理的。

我的问题是，我该如何避免这种情况？

如果我删除旧的高级图表，旧应用程序将无法检测到新的角度高图。如果我删除新的，尝试通过窗口对象访问highcharts引用不起作用，因为highcharts似乎无法检测新角度的模板，也不知道如何使用它。

有没有人在应用程序的两个部分（旧的和新的）上放置一个带有highcharts的混合应用程序？

答案

Highcharts对象保存在Highcharts对象的Window属性中。 Highcharts检查它是否已在此属性中定义，如果为true则抛出错误16。

解：

您可以尝试在其他一些属性中保存其中一个版本的Highcharts，并在加载其他版本之前清除Window.Highcharts：

html：

<script src="https://code.highcharts.com/4.2.2/highcharts.src.js"></script>
<script>
  this.HighchartsOld = this.Highcharts;
  this.Highcharts = null;
</script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container1" style='height: 200px'></div>
<div id="container2" style='height: 200px'></div>

JS：

var chart = Highcharts.chart('container1', {
  series: [{
    data: [1, 2]
  }]
});

var chart = HighchartsOld.chart('container2', {
  series: [{
    data: [1, 2]
  }]
});

现场演示：http://jsfiddle.net/BlackLabel/2x7ys9eo/