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（16）：Move Configurations
Move Configurations to Separate Class in Code-First: By now, we have configured all the domain class ...
- 软件开发中对MVC的一些理解
接口隔离 通俗一点讲,接口隔离就是当一个类需要继承另一个类时, 如果被继承的类中有继承的类用不到的方法或者属性时,就不要去实现这个继承.如果真的情非得已必须要继承,那么也需要从被继承的类中再提取出一个 ...
- c++中字符串的截取：
c++中字符串的截取: string 类提供字符串处理函数,利用这些函数,程序员可以在字符串内查找字符,提取连续字符序列(称为子串),以及在字符串中删除和添加.我们将介绍一些主要函数. 1.函数fin ...
- Ansible Jinja2使用
常用方法 ternary 根据结果的真假来决定返回值 - name: Set container backend to "dir" or "lvm" based ...
- vimtutor总结
$vimtutor ================================================================================ W e l c o ...
- Python爬虫开发
1. 语法入门 Python教程 2. 爬虫学习系列教程 1)宁哥的小站 https://github.com/lining0806/PythonSpiderNotes 2)Python爬虫开发 3) ...
- hdu 1847 Good Luck in CET-4 Everybody!（巴什博弈）
Good Luck in CET-4 Everybody! HDU - 1847 大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧张得连短学期的ACM都没工夫练习了,反正我知道的Kiki和Ci ...
- HDU1272-小希迷宫
题目链接:点击打开链接 Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首 ...
- PAT天梯赛L2-007 家庭房产
题目链接:点击打开链接 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(<=1000),随后N行,每行按下列 ...
- day20模块作业
1.模块化作业 1.回顾文件递归遍历. 默写一遍. 入口在: 当文件是个文件夹的时候 出口在: 文件是一个文件 2.计算时间差(用户输入起始时间和结束时间. 计算时间差(小时), 例如, 用户输入20 ...