在使用FusionCharts的时候，用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。图表将根据父容器元素自动调整其尺寸。让我们来看看在HTML中这是如何实现的。
以百分比的方式调整图表,首先需要更新HTML代码，如下所示:
<div id="chartContainer" style="width:800px;height:300px;">
This text is replaced by the chart
</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Column3D.swf", "myChartId", "80%", "100%", "0", "1");
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
// --></script>
在上面的代码中,我们指定图表的宽度为80%，高度为100%。id为——“chartContainer”的DIV是图表的容器元素。 因此,它的宽度和高度会以百分比的方式从DIV的维度派生。
在上面的例子中,我们设置DIV的宽度为800像素的,高度为300像素。因此,图的大小会自动变成800x300。如下所示:
动态调整图表的特性
当父容器的大小发生改变时，FusionCharts可以动态地调整自身的大小。用户只需要进行下面的操作:
- 设置图表的大小比例
- 设置你的HTML图表容器,这样当浏览器调整或者变更时它的尺寸会动态变化
- 当容器元素发生改变时,图表本身也会立即动态地调整。
在下面的示例中,我们创建了一个非常基本的示例,图表会填满整个web浏览器的空间,如果浏览器的大小发生改变或调整,图表本身将做出相应的调整。
<html>
<head>
<title>My First chart using FusionCharts
- Using dynamically resizable chart</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body style="height:100%;">
<div id="chartContainer" style="height:100%;" >
FusionCharts will load here
</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("FusionCharts/Area2D.swf", "myChartId",
"100%", "100%", "0", "1");
myChart.setXMLUrl("LargeData.xml");
myChart.render("chartContainer");
// --></script>
</body>
</html>
相关推荐
内容包括 FusionCharts破解去连接版，FusionCharts 3.1 破解版，FusionCharts配置文件，FusionChartsFree中文开发指南电子书，以及如何消除中文乱码的方法文章。内容很全。
《FusionCharts图表控件中文版使用手册》是针对初学者设计的一份详细教程，旨在帮助用户快速掌握这款强大的图表工具。FusionCharts是一款流行的JavaScript图表库，它能够以丰富的互动性和美观的视觉效果呈现数据。 ...
中文版使用手册旨在提供全面的指导，帮助用户更轻松地理解和使用这款图表控件。 首先，FusionCharts的核心组成部分包括三个要素： 1. SWF动画文件：这是FusionCharts的基础，包含预定义的图表类型和交互行为。这些...
- **响应式设计**：确保图表在不同屏幕尺寸和设备上都能正确显示，可能需要调整图表大小和布局。 - **图表交互**：利用FusionCharts的事件处理机制，增加图表的互动性，如点击图表区域查看详细信息。 - **性能优化...
《FusionCharts图表控件中文版使用手册定义》是一份详细介绍如何使用FusionCharts图表控件的网络文档。FusionCharts是一款强大的图表生成工具，它能够帮助开发者创建丰富的交互式图表，广泛应用于数据分析和可视化...
**FusionCharts是一款强大的JavaScript图表库，用于创建交互式的、动画丰富的数据可视化图表。它支持多种编程语言，包括C#、VB.NET、PHP和JSP，使得开发者在各种后端环境下都能轻松集成图表功能，为业务报表提供直观...
- **结合JavaScript的应用**：使用JavaScript可以实现更多交互功能，如动态加载数据、响应用户事件等。 - **热点链接**：通过`link`属性设置，为图表元素添加链接，用户点击时触发指定动作。 - **图表数据导出**...
FusionCharts 参数及功能特性详解实例 FusionCharts 是一款功能强大且灵活的图表工具，可以帮助开发者快速...FusionCharts 提供了丰富的参数和功能特性，开发者可以根据需要进行设置和调整，以实现图表的高度自定义。
3. 合理设置图表尺寸：避免过度渲染，根据设备屏幕大小动态调整图表的宽度和高度。 通过以上步骤，你可以在Android应用中成功地集成和封装FusionCharts图表控件，实现数据的可视化展示。记住，良好的代码组织和适当...
**JSP下操作图形控件FusionCharts** FusionCharts是一款强大的JavaScript图表库，它可以用于在Web应用中创建丰富的交互式图表。在Java Server Pages (JSP)环境中使用FusionCharts，可以为开发者提供便捷的方式来...
FusionCharts提供了丰富的API和方法来实现图表的自定义，如更改颜色、调整字体、添加工具提示、响应鼠标事件等。此外，还支持图表的交互性，如点击图表元素触发事件、数据钻取等。 8. **性能优化** 为了提高性能...
值得注意的是，FusionCharts提供的文件包中包含了Charts文件夹（存放Flash图表文件）、Code文件夹（包含各种语言的示例代码）、Gallery（所有图表的简单示例）以及JSClass文件夹（包含核心的`FusionCharts.js`和`...
然后在HTML文件中通过`<script>`标签引入，确保在使用图表的脚本之前加载FusionCharts库。 ```html <script src="path/to/fusioncharts.js"> ``` ### 3. 创建基本图表 创建FusionCharts图表的基本步骤包括：初始...
本文将深入探讨FusionCharts图表控件的中文版使用手册，包括其核心组成部分、各种功能以及如何有效地利用它们。 首先，我们要了解FusionCharts的三大基本元素：SWF动画文件、XML数据文件和承载图表的载体。SWF文件...
FusionCharts是一款强大的图表控件，专为开发者设计，用于创建引人入胜、交互式的数据可视化效果。这款工具在IT行业中备受推崇，因为它提供了丰富的图表类型和灵活的定制选项，使得即便是非专业的数据可视化专家也能...
FusionCharts是一款强大的图表生成工具，专为开发者设计，用于创建互动式的、视觉吸引人的数据可视化解决方案。这个控件能够帮助开发人员轻松地在网页或应用程序中集成各种类型的图表，如柱状图、饼图、线图、地图等...
FusionCharts是一款强大的图表库，它能够帮助开发者在网页中创建出丰富多样的交互式图表。这个库通过结合Flash技术和JavaScript来实现图表的渲染和功能交互。以下将详细阐述FusionCharts在网页呈现图表的过程： 1. ...
FusionCharts是一款强大的JavaScript图表库，能够将JSON格式的数据转换为交互式的图表，从而提升数据分析和展示的效果。本文将深入探讨如何利用FusionCharts结合JSON数据来创建图表。 **FusionCharts简介** ...