FusionCharts可以在一个页面嵌入任意数量的图表（即使用注册版）.事实上，你甚至可以把我们的其他产品如仪表盘和地图 (FusionWidgets, FusionMaps 和 PowerCharts) 放在同一个页面中。这里，我们很快会看到这样的一个例子：
每个页面上的图表应使用不同的DIV来渲染.
每个页面上的图表都应该有一个不同的ID(在Javascript的容器中指定)
每个图表都有它自己的JavaScript变量名 (如, var chart1 = new FusionCharts(...); var chart2 = new FusionCharts(...); )
下面是一个例子所示页面包含多个图表。该网页命名为MultipleCharts.html，并存储在MyFirstChart文件夹。
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chart1div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart1 = new FusionCharts("../FusionCharts/Column3D.swf", "myChart1Id", "900", "300", "0", "0");
myChart1.setDataURL("Data.xml");
myChart1.render("chart1div");
</script>
<div id="chart2div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart2 = new FusionCharts("../FusionCharts/Pie3D.swf", "myChart2Id", "500", "300", "0", "0");
myChart2.setDataURL("Data.xml");
myChart2.render("chart2div");
</script>
</body>
</html>
正如你在这里看到的，我们在这个页面上嵌入了两个图表.一个3D柱状图一个3D饼图。柱状图有一个名为myChart1的ID，它对应的DIV名字叫chart1div，图表变量叫myChart1.饼图具有不同的ID、DIV名和图表变量。
运行这个页面，你会看到这个页上的两个图表。
分享到：
相关推荐
在 Laravel 框架中，Charts 是一个非常实用的库，它允许开发者使用多个不同的图表库来创建丰富的数据可视化效果。这个库由 ConsoleTVs 开发，版本号为 e695e07，主要针对 PHP 开发者，特别是那些在 Laravel 中处理...
以下是一个基本步骤： 1. 获取Chart的数据源（DataSource）。 2. 将DataSource的数据转换为CSV格式字符串。 3. 使用`a`标签下载链接或者FileSaver.js库保存到本地。 接下来，我们讨论如何将Chart转换为PDF。这通常...
在C#编程环境中，Microsoft Chart Control是一个强大的工具，用于创建各种图表类型，如折线图、柱状图、饼图等。本示例是关于如何使用C#的Chart控件来生成图表的一个演示项目，主要涉及到以下几个关键知识点： 1. *...
总的来说，“几个常用的Chart图表”这个主题涵盖了Web开发中的数据可视化、动态数据处理、交互式设计等多个重要知识点，对于构建功能强大的数据分析和展示平台具有实际价值。虽然Flash不再是首选的技术，但其在图表...
FusionCharts - FusionCharts 是一个跨浏览器和跨平台的flash图表组件，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。 ? JFreeChart -...
2. **WebForm19.aspx、Default.aspx、WebForm20.aspx...**：这些是ASP.NET的网页文件，每个页面可能展示一个特定的WebChart实例。比如，`Default.aspx`可能是主页面，展示了基本的图表使用方法；而`WebForm19.aspx`...
总之，jQuery组织结构图表插件OrgChart是一个强大且灵活的工具，可以帮助开发者快速构建交互式、易于理解的组织结构图，适用于企业网站、人力资源系统等多种应用场景。通过深入理解和实践，开发者可以充分利用其功能...
你可以根据需要处理这些信息，例如弹出一个提示框显示数据点的值，或者导航到其他页面来显示更多详细信息。 描述中提到的"放心使用"意味着这个`Chartjsdemo`可能是一个已经配置好点击事件的示例代码，用户可以直接...
在运行时，该服务器控件会生成一个图片（譬如一个.PNG文件），是使用<asp:chart/>控件输出的元素在页面的客户端HTML中引用的。该服务器控件支持缓存图表图片的功能，还支持保存到硬盘上以在持久性场景中使用的功能。...
3. **饼图**：饼图将整个圆分成多个扇区，每个扇区代表一个类别所占的百分比。饼图能够清晰地表示各部分相对于整体的比例关系，适用于展示各类占比。 4. **折线图**：折线图与线型图相似，但通常用于表示更多数据点...
Flowchart.js是一个JavaScript库，专为在网页上绘制流程图而设计。它允许开发者通过简单的语法创建和展示流程图，无需深厚的图形设计背景。这个JS源码库尤其适合初学者，因为它的API清晰，易于理解和使用。 Flow...
4. **多图表组合**：如何在一个页面上组合多个不同类型的图表，形成综合的数据视图。 5. **自定义行为和事件**：如何响应用户的交互，例如点击图表元素后的弹出信息或者数据筛选。 通过这些示例，开发者可以逐步...
这款工具的源代码可以在码云（https://www.oschina.net/p/orgchart）上找到，为开发者提供了一个便捷的下载渠道。 一、jQuery基础与OrgChart.js结合 jQuery 是一个广泛使用的 JavaScript 库，简化了DOM操作、事件...
2. **样式表**：可能有一个或多个CSS文件，如`orgchart.css`，定义了组织结构图的布局和视觉样式。 3. **示例或测试页面**：通常会有一个HTML文件，如`index.html`，演示如何使用该插件并提供一个测试环境。 4. **...
- **图表区域**：一个Chart控件可以包含多个图表区域，每个区域可以显示不同类型或来源的数据。 - **图像映射**：生成的图表可以带有图像映射，允许用户点击图表的特定部分触发事件。 - **动画效果**：通过`...
总的来说，Open Flash Chart是一个功能强大且灵活的图表库，对于需要在Web应用中实现数据可视化的开发者来说，它是一个值得考虑的工具。其开源性质、丰富的图表类型以及易于使用的API都是其主要优势。通过掌握Open ...
"swfobject.js"是一个常用的Flash对象嵌入JavaScript库，尽管Fly Chart主要依赖HTML5 Canvas进行绘图，但在旧版本的浏览器或不支持Canvas的环境中，可能需要Flash作为备用方案。因此，swfobject.js可能用于在这些...
在网页开发中，ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、...确保正确引用ECharts库后，按照上述步骤和注意事项，你就能实现在同一个页面上同时加载和展示多个ECharts图表了。
- `ChartAreas`：此属性定义了图表区域，可以创建多个独立的图表空间在同一图表上展示不同数据。`ChartArea`有自己的属性，如`AxisX`和`AxisY`，用于配置X轴和Y轴的显示。 2. **事件解析** - `Paint`事件：当...