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

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 的图表加载非常缓慢，大多数时候浏览器会提示我页面没有响应，最后我只能看到没有图表的导航器；
• highcharts 的图表正在快速加载。

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

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

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

Answer 1

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