如何将不同模块的两个图表放在同一页面上？

Question

我在一页上放了两个图表。第一个图表（散点图）是使用 Highcharts 创建的，第二个图表（线）是使用 Highstock 创建的。由于 Highcharts 包含在 Highstock 中，所以我使用这个：

<script src="resources/chart/Highstock/js/highstock.js"></script>   
<script src="resources/chart/Highstock/js/modules/exporting.js"></script>

我的页面部分如下所示：

<script src="resources/chart/Highstock/js/highstock.js"></script>
<script src="resources/chart/Highstock/js/modules/boost.js"></script>   
<script src="resources/chart/Highstock/js/modules/exporting.js"></script>

<script type="text/javascript"> create the chart using the highcharts and put it in a containerForHighchart </script>
<script type="text/javascript"> create the chart using the highstock and put it in a containerForHighstock </script>

<div id="containerForHighchart" style="height: 700px; width: 100%; margin: 0 auto;"></div>
<div id="containerForHighstock" style="height: 700px; width: 100%; margin: 0 auto;"></div>

现在：我想实现这样的目标：

第一个图表 (highcharts) 应该使用 boost.js 模块。
第二个图表 (highstock) 不应使用 boost.js 模块。

为什么？由于性能和一些错误。两个图表都必须显示大量数据。

当我使用boost.js并且在页面上只放一张图表时：

highstock 的图表加载很慢，大多数时候浏览器提示我页面没有响应，最后我只能看到一个没有图表的导航器；
highchart 的图表正在快速加载。

当我不使用boost.js并且在页面上只放一张图表时：

highstock 的图表正在快速加载；
highchart 的图表加载时间过长，速度很慢。

有什么方法可以让两个图表中只有一个使用同一页面上的boost.js模块吗？

Answer 1

您可以尝试的一种解决方案是将图表（单独）放在单独的网页中，并使用 <iframe> 标签将它们放在一个 HTML 文档中。这样一来，您就可以控制哪个图表获取哪些库，并且它们不应相互冲突。

如何将不同模块的两个图表放在同一页面上？

How to put two charts on the same page with different modules?

javascript

highcharts

highstock