Flash图表控件FusionCharts调整图表百分比大小
用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。
以百分比的方式调整图表,首先需要更新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>
Flash图表控件FusionCharts调整图表百分比大小的更多相关文章
- Flash图表控件FusionCharts自定义图表y轴最大/最小值
自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...
- Flash图表控件FusionCharts如何高亮显示数据
使用Flash图表控件FusionCharts时,通过改变alpha值是高亮显示数据的最简单方式. XML代码如下: <chart> <set label='John' value= ...
- Flash图表控件FusionCharts如何在图表中显示标识和图片
在FusionCharts的图表中显示外部商标 使用FusionCharts之后,用户可以在运行时加载需要在图表中显示的外部标识/图片/图像.这个标识可以GIF / JPEG / PNG或SWF文件格 ...
- Flash图表控件FusionCharts如何自定义图表的工具提示
什么是FusionCharts的工具提示 当鼠标指示到FusionCharts图表中一个特定的数据点时所显示出来的信息就是工具提示.提示的信息可以是以下内容: 单系列图(除了饼图和环图):名称和值 饼 ...
- Flash图表控件FusionCharts如何定制图表中的趋势线和趋势区
FusionCharts中的趋势线是什么 趋势线是横跨图标的水平/垂直线条,用来表示一些预订数据值. 在图表中展示趋势线 用户可以使用<chart>元素中的trendlines属性来显示图 ...
- Flash图表控件FusionCharts如何在图表标绘非连续数据
你可能经常要以不完整的数据点绘制图表.例如,当绘制每月的销售图表时,你可能没有所有的月数据.所以,你可能只想以一个空白的区域来显示缺失的数据,不在这个区域中绘制任何东西.FusionCharts可以让 ...
- Flash图表控件FusionCharts如何自定义图表上的垂直线
什么是垂直分割线 垂直(或条形图中的水平)分隔线是用来帮助用户分隔数据块的.可以被放置在任何两个数据点,即使是不规则的间隔也可以. <chart caption='Monthly Revenue ...
- [深入浅出Windows 10]QuickCharts图表控件库解析
13.4 QuickCharts图表控件库解析 QuickCharts图表控件是Amcharts公司提供的一个开源的图表控件库,这个控件库支持WPF.Silverlight.和Windows等 ...
- ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
随机推荐
- Entity Framework Code-First（10.3）：Property Mappings
Property Mappings using Fluent API: Here, we will learn how to configure properties of an entity cla ...
- 八数码 Java实现
参考http://blog.csdn.net/helloworld10086/article/details/41853389 package com.EightNumber.view; import ...
- jQuery学习1
学习jQuery的过程中发现了一个博客把jquery的要点整理的很不错,摘抄其精华以备学习.感谢:http://blog.csdn.net/wph_1129/article/details/59932 ...
- OpenStack基础知识-tox的详解介绍
1.tox简介 tox是通用的虚拟环境管理和测试命令行工具.tox能够让我们在同一个Host上自定义出多套相互独立且隔离的python环境,每套虚拟环境中可能使用了不同的 Python 拦截器/环境变 ...
- Wannafly挑战赛27B（DFS，链表头插法）
#include<bits/stdc++.h>using namespace std;int cnt=0;int flag=0;int to[400007],nex[400007],vis ...
- C#之抽象类、虚方法、重写、接口、密封类
前言 学了这么长时间的C#,我想说对于这个东东还是不是特别了解它,以至于让我频频郁闷.每次敲代码的时候都没有一种随心所欲的感觉.所以不得不在网上搜集一些资料,look 了 look~ 内容 ...
- UML——再回首
概述 在画图的过程中,发现自己还是有好多不懂的地方,对于四大关系理解的不是特别透彻,所以画图的过程中总是"剪不断,理还乱!"再一次整理四大关系,再回首必然丰收~~~ 1.实 ...
- Zookeeper下载方法
Zookeeper官网地址:http://zookeeper.apache.org/ Zookeeper下载链接:http://mirrors.tuna.tsinghua.ed ...
- Objective-C对象的申请空间与初始化
对象分配空间与初始化 对象分配空间与初始化 使用Objective-C语言创建一个对象有两个步骤,你必须: 为新对象动态分配内存空间 初始化新分配的内存,并赋初值 不经过如上两步,一个对象就没有完全功 ...
- 把查询出来的结果进行修改再赋值给list
List<RivBillNoPatternL> list = this.jdbcTemplate.getJdbcOperations().query(sqlSb.toString(), p ...