`
房价会降吗
  • 浏览: 64359 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Flash图表控件FusionCharts调整图表百分比大小

阅读更多

用户在使用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>

 

 

 

  • 大小: 48.3 KB
1
1
分享到:
评论

相关推荐

    资料较全的 Flash图表控件 FusionCharts

    内容包括 FusionCharts破解去连接版,FusionCharts 3.1 破解版,FusionCharts配置文件,FusionChartsFree中文开发指南电子书,以及如何消除中文乱码的方法文章。内容很全。

    利用FusionCharts 实现数据图表展示

    - **响应式设计**:确保图表在不同屏幕尺寸和设备上都能正确显示,可能需要调整图表大小和布局。 - **图表交互**:利用FusionCharts的事件处理机制,增加图表的互动性,如点击图表区域查看详细信息。 - **性能优化...

    FusionCharts 非常绚的flash图表

    **FusionCharts:打造绚丽的Flash图表** FusionCharts是一款高度评价的Flash图表库,它以其生动、炫目的视觉效果而备受赞誉。这款工具能够帮助开发者轻松创建出各种复杂的统计图表,适用于各种业务分析和数据可视化...

    fusioncharts asp.net 图表控件示例

    FusionCharts提供了丰富的API和方法来实现图表的自定义,如更改颜色、调整字体、添加工具提示、响应鼠标事件等。此外,还支持图表的交互性,如点击图表元素触发事件、数据钻取等。 8. **性能优化** 为了提高性能...

    FusionChartsFree_FLASH图表控件源代码和使用说明

    在"标题"中提到的"FusionChartsFree_FLASH图表控件源代码和使用说明",意味着这个压缩包不仅包含了控件本身,还提供了源代码供开发者研究和定制,以及详细的使用文档,帮助用户快速理解和应用。 在"描述"中,我们...

    非常好用的图标控件FusionCharts

    FusionCharts是一款强大的图表控件,专为开发者设计,用于创建引人入胜、交互式的数据可视化效果。这款工具在IT行业中备受推崇,因为它提供了丰富的图表类型和灵活的定制选项,使得即便是非专业的数据可视化专家也能...

    JSP下操作图形控件FusionCharts

    **JSP下操作图形控件FusionCharts** FusionCharts是一款强大的JavaScript图表库,它可以用于在Web应用中创建丰富的交互式图表。在Java Server Pages (JSP)环境中使用FusionCharts,可以为开发者提供便捷的方式来...

    js实现图表-FusionCharts

    1. **C#**:对于.NET平台,FusionCharts提供了与C#的完美集成,可以通过ASP.NET控件轻松地在网页中添加图表,同时也支持MVC框架。 2. **VB.NET**:VB.NET开发者也可以通过FusionCharts的.NET类库来创建图表,语法...

    FusionCharts图表控件中文版使用手册.doc

    《FusionCharts图表控件中文版使用手册》是针对初学者设计的一份详细教程,旨在帮助用户快速掌握这款强大的图表工具。FusionCharts是一款流行的JavaScript图表库,它能够以丰富的互动性和美观的视觉效果呈现数据。 ...

    FusionCharts图表控件ABC入门.ppt

    FusionCharts是一款强大的图表控件,它利用Adobe Flash技术,为用户提供交互式的、数据驱动的动态图表。这个组件特别适合那些希望通过视觉化方式呈现复杂数据的开发者,无论他们使用的是JSP、HTML或其他任何网页脚本...

    FusionCharts Free(图表flash控件)很好用,有教程和dll

    FusionCharts Free(图表flash控件)很好用,有教程和dll.

    fusioncharts图表

    FusionCharts是一款强大的数据可视化工具,专为Web开发者设计,用于创建吸引人的、交互式的图表和图形。这款图表库以其出色的性能、丰富的样式和多样的图表类型而受到广泛赞誉,尤其在统计分析和数据呈现方面表现...

    FusionCharts图表控件中文版使用手册整理.pdf

    例如,FusionCharts支持将图表转换为图片或PDF导出,这使得用户可以方便地保存或打印图表,特别是在没有Flash支持的设备上。此外,热点链接功能允许将图表的特定区域关联到网页链接,点击后可跳转至其他页面,增强了...

    Android上,使用FusionCharts进行图表控件封装

    3. 合理设置图表尺寸:避免过度渲染,根据设备屏幕大小动态调整图表的宽度和高度。 通过以上步骤,你可以在Android应用中成功地集成和封装FusionCharts图表控件,实现数据的可视化展示。记住,良好的代码组织和适当...

    FusionCharts图表控件中文版使用手册定义.pdf

    《FusionCharts图表控件中文版使用手册定义》是一份详细介绍如何使用FusionCharts图表控件的网络文档。FusionCharts是一款强大的图表生成工具,它能够帮助开发者创建丰富的交互式图表,广泛应用于数据分析和可视化...

    FusionCharts很炫的swf图表控件

    FusionCharts是一款强大的图表生成工具,它以SWF(Shockwave Flash)文件格式提供丰富的交互式图表,适用于Web应用程序,帮助开发者轻松创建出美观且功能强大的数据可视化效果。这款控件以其炫酷的设计和易用性赢得...

    PBFusionChartsFlash图表.zip_Flash图表.zip_FusionCharts_pb_zip

    通过解压并研究这些文件,用户可以了解如何在PowerBuilder环境中集成FusionCharts,创建动态的Flash图表,并在Web应用中展示数据。这有助于提升Web应用的数据可视化能力和用户体验。在实际开发中,开发者会根据`data...

Global site tag (gtag.js) - Google Analytics