在同一页面中使用图表和小部件

Question

这是融合图表的新手，我在同一页面中同时使用了图表和小部件。 并且正在使用Javascript图表而不是swf文件。 由于它们都具有相同的函数名称来生成图表，但其中具有不同的代码，因此我可以从我使用的js文件的选择中获得任何一个。

码：

var myChart1 = new FusionCharts( "Thermometer", "ChId2", "130", "280", "0", "1" );
myChart1.setDataURL("xml/thermo.xml");
myChart1.render("thermo");


var chart = new FusionCharts("Line", "ChartId", "300", "300", "0", "1");
chart.setDataURL("xml/line.xml");      
chart.render("chartdiv");

如何在同一页面中同时使用两者？

Answer 1

请确保将“ FusionCharts.HC.js”，“ jquery.min.js”，“ FusionCharts.HC.Charts.js ”和“ FusionCharts.HC.Widgets.js ”与“ FusionCharts.js ”保留在同一文件夹中，同时在同一页面中呈现Charts和Widgets的JavaScript版本。

您可以使用最新的FusionCharts XT Service Release 4包中的3个常见文件“ FusionCharts.js”，“ FusionCharts.HC.js”和“ jquery.min.js”。

Answer 2

从XT开始，FusionCharts有了一个统一的JavaScript框架，可以呈现FusionCharts Suite XT的4个核心包（FusionCharts XT，FusionWidgets XT，FusionMaps XT和PowerCharts XT）中的任意一个图表，量表和地图。

这种统一的框架称为FusionCharts JavaScript类，并且基于以下所述的包，JavaScript模块被分布到各种文件中（某些文件对于所有包都是通用的，而某些文件是特定于包的）：

A. FusionCharts XT ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.Charts.js
4. jquery.min.js

B.FusionWidgets XT ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.Widgets.js
4. jquery.min.js

C. PowerCharts XT ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.PowerCharts.js
4. jquery.min.js

D.FusionMaps XT ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.Maps.js
4. jquery.min.js
5. 以及个别的地图定义JavaScript文件（例如，世界地图），文件名是FusionCharts.HC.world.js

i）从上面的列表中可以发现， FusionCharts.js ， FusionCharts.HC.js （和jquery.min.js ）对于所有四个包都是通用的，因此可以安全地使用四个包中任何一个的这些文件。 但是，FusionCharts团队建议使用最新的FusionCharts.js和FusionCharts.HC.js 。

ii）要知道哪个是最新的，可以从每个文件顶部的版本字符串中跟踪内部版本号。 通过内部版本号，我指的是版本字符串的最后一部分。 例如，如果您有一个版本字符串，例如@version fusioncharts/3.2.4-release.8565 ，则8565是内部版本号。 内部版本号越大，它越更新和最新。

iii）这3个文件对于从4个核心包中的任何一个渲染JavaScript图表/量表/地图都是必不可少的。 您需要将这些文件放置在单个文件夹中。

iv）需要特定于文件包的文件FusionCharts.HC.Charts.js来呈现FusionCharts XT Pack中存在的JavaScript图表（例如Column2D，Scatter，Pareto2D，Pie3D等）。 因此，如果要绘制折线图（属于FusionCharts XT包），则需要将该文件与上述（第iii点）文件一起放置。

v）需要特定于文件包的文件FusionCharts.HC.Widgets.js来呈现FusionWidgets XT Pack中存在的JavaScript图表和仪表（例如SparkLine，温度计，HBullet，漏斗等）。 因此，如果要渲染温度计（FusionWidgets XT包的一部分），则需要将该文件与上述（第iii点）文件一起放置。

vi）呈现PowerCharts XT Pack中存在的JavaScript图表（如Spline，DragColumn，LogMSColumn2D，DragNode，SelectScatter等）需要包特定的文件FusionCharts.HC.PowerCharts.js 。 因此，如果要渲染样条图（属于PowerChats XT包的一部分），则也需要将该文件与上述（第iii点）文件一起放置。

vi）呈现JavaScript地图需要特定于文件包的文件FusionCharts.HC.Maps.js 。 如果要渲染任何地图，则也需要将该文件与上述（第iii点）文件一起放置。 此外，对于每个地图（例如世界，美国，欧洲，德克萨斯州等），都有一个单独的JavaScript文件，其中包含地图区域定义数据。 您还需要将这些单独的地图定义文件（例如FusionCharts.HC.world.js或FusionCharts.HC.texas.js ）与上述（第iii点）文件一起放置。

---

因此，第一件事是根据要求正确放置文件。

现在，另一个重要的事情是：

您不需要通过<script>标记将所有这些JavaScript文件加载到HTML中。 您只需要在HTML中加载FusionCharts.js ，其余文件将根据您要呈现的图表/地图类型由FusionCharts.js自动/动态加载。

但是，我重申： 所有 JavaScript文件应物理存在于该文件夹中，以便FusionCharts.js可以动态访问然后加载它们。

---

完成这些步骤后，您可以使用相同的构造函数来绘制图表，量表或地图。 您现在需要注意的就是指定的图表/量表/地图类型，以及是否向图表/量表/地图提供正确的数据。