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

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> 

现在：我想实现这样的事情：

• 第一个图表（高图）应该使用boost.js模块。
• 第二个图表（highstock）不应该使用boost.js模块。

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

• highstock的图表载入速度很慢，大部分时间都在浏览器告诉我，该页面不响应在：

  当我使用boost.js，把只有一个图表在页面上结束我只能看到没有图表的导航器;

• 高图表加载速度很快。

当我不使用boost.js，把只有一个图表页面上：

• highstock的图表加载速度快;
• 高图的图表加载时间过长，速度很慢。

有什么办法可以在同一页上使用boost.js模块吗？

Answer 1

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