文档章节

JS图表工具FusionCharts调整图表百分比大小

咲晚杍
 咲晚杍
发布于 2013/09/22 10:46
字数 474
阅读 57
收藏 0
在使用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.evget.com/zh-CN/Info/catalog/19493.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
FusionCharts常见问题FAQ及解决方法(FusionCharts 100问)

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

flyingsnail
2014/04/25
2.5K
0
FusionCharts图表错误原因及调试方法大全

无标题文档 当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了报错的多种原因及调试方法供大家参考,希望对大家有帮助。 >>>查看调试方法 Fusioncharts的Javascript图表却显示...

panda456
2013/01/23
395
0
FusionCharts使用JavaScript渲染iPhone/iPod/iPad图表

FusionCharts使用JavaScript: FusionCharts允许用户创建建立JavaScript图表(也就是web上的HTML5 /Canvas图表)。这个特性允许用户在不支持Flash播放器的web浏览器上创建图表,如iPhone / iPad...

答应不爱你
2013/09/04
266
0
FusionCharts将告别Flash版成为纯粹的Javascript图表控件

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

答应不爱你
2013/09/03
610
0
FusionCharts与HighCharts功能对比分析

选择一个图表组件是一项复杂的任务,因为选择图表时,既要考虑当前需要,又要能应对未来多变的复杂业务需求。 所以,在选择图表的时候,我们需要对图表有更深入的对比和研究。接下来,小编将...

flyingsnail
2014/04/18
543
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
1
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
3
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部