文档章节

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

头顶锅盖
 头顶锅盖
发布于 2013/08/28 16:14
字数 485
阅读 180
收藏 1

用户在使用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>
转载自: http://www.cnblogs.com/shenqi/p/3287444.html

本文转载自:http://www.cnblogs.com/shenqi/p/3287444.html

头顶锅盖
粉丝 1
博文 25
码字总数 14223
作品 0
澳门
私信 提问
加载中

评论(0)

FusionCharts常见问题FAQ及解决方法(FusionCharts 100问)

当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助。 FusionCharts 设置字体大小 FusionCharts服务器要求有要求吗? 如何...

flyingsnail
2014/04/25
2.5K
0
FusionCharts图表控件常见问题解答FAQ

由于最近有不少网友咨询FusionCharts图表的一些常见问题,如安装和配置,导出格式,数据源等等,因此慧都小编特意整理了一些FusionCharts的FAQ供大家参考。>>>下最新版FusionCharts v3.2.2-S...

panda456
2013/01/17
124
0
2012年度FusionCharts图表控件最受欢迎文章精选(上)

本文主要整理了2012年度FusionCharts图表控件最受欢迎的文章,如使用教程,帮助文档,实例,演示,下载地址,参数大全,选型对比等等,希望对FusionCharts使用者有帮助,欢迎交流与评论! Fu...

nautygirl
2013/01/15
200
0
FusionCharts生成Flash图表常见问题FAQ

本文主要汇总了FusionCharts生成Flash图表时的一些常见问题(FAQ)以及解决方法/调试方法,欢迎交流!>>>参考FusionCharts使用教程 问题描述:利用FusionCharts创建Flash图表时,能否直接从数...

panda456
2013/01/29
317
0
FusionCharts将告别Flash版成为纯粹的Javascript图表控件

众说周知,FusionCharts自其2002年推出以来,一直都是最优秀的Flash图表控件,但慧都从其开发商印度InfoSoft公司获得独家消息,FusionCharts将停止Flash版本的开发与维护,而FusionCharts的下...

答应不爱你
2013/09/03
636
0

没有更多内容

加载失败,请刷新页面

加载更多

开源商城开发笔记4-配置MyBatis生成代码

本项目基于SpringBoot开发,引入的是mybatis-spring-boot 1、引入依赖,包括spring-boot,mybatis,druid,junit,log4j 2.配置MyBatis-Generator插件,使用Maven插件的方式生成代码 3.配置M...

土龙
39分钟前
69
0
Java深拷贝和浅拷贝

对象拷贝有哪些 对象拷贝(Object Copy)就是将一个对象的属性拷贝到另一个有着相同类类型的对象中去。在程序中拷贝对象是很常见的,主要是为了在新的上下文环境中复用对象的部分或全部数据。 ...

Onegoleya
42分钟前
70
0
Android Binder机制 - interface_cast和asBinder讲解

研究Android底层代码时,尤其是Binder跨进程通信时,经常会发现interface_cast和asBinder,很容易被这两个函数绕晕,下面来讲解一下: interface_cast 下面根据下述ICameraClient例子进行分析...

天王盖地虎626
今天
72
0
Java @Deprecated Annotation(注解)

在本部分的快速指南中,我们将会查看 Java 的 deprecated API 和如何在程序中使用 @Deprecated 注解。 @Deprecated Annotation(注解) 作为程序的进化和迭代,随着时间的推移,在项目中总会...

honeymoose
今天
94
0
OSChina 周四乱弹 —— 失业后的阳光太刺眼了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @大又 :分享Jack Stauber的单曲《Fighter》 《Fighter》- Jack Stauber 手机党少年们想听歌,请使劲儿戳(这里) @theLovelyBugfly :笑死我...

小小编辑
今天
1.1K
7

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部