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模块。

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

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

highstock的图表加载速度很慢，大多数情况下浏览器通知我页面没有响应，最后我只能看到没有图表的导航器;
高图的图表正在快速加载。

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

highstock图表加载速度很快;
高图的图表加载太长而且非常慢。

有两种方法只有两个图表中的一个在同一页面上使用boost.js模块吗？

Answer 1

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

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

1 个答案: