用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。

以百分比的方式调整图表,首先需要更新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>

FusionCharts V3.2.2版本免费下载

Flash图表控件FusionCharts调整图表百分比大小的更多相关文章

  1. Flash图表控件FusionCharts自定义图表y轴最大/最小值

    自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...

  2. Flash图表控件FusionCharts如何高亮显示数据

    使用Flash图表控件FusionCharts时,通过改变alpha值是高亮显示数据的最简单方式. XML代码如下: <chart> <set label='John' value= ...

  3. Flash图表控件FusionCharts如何在图表中显示标识和图片

    在FusionCharts的图表中显示外部商标 使用FusionCharts之后,用户可以在运行时加载需要在图表中显示的外部标识/图片/图像.这个标识可以GIF / JPEG / PNG或SWF文件格 ...

  4. Flash图表控件FusionCharts如何自定义图表的工具提示

    什么是FusionCharts的工具提示 当鼠标指示到FusionCharts图表中一个特定的数据点时所显示出来的信息就是工具提示.提示的信息可以是以下内容: 单系列图(除了饼图和环图):名称和值 饼 ...

  5. Flash图表控件FusionCharts如何定制图表中的趋势线和趋势区

    FusionCharts中的趋势线是什么 趋势线是横跨图标的水平/垂直线条,用来表示一些预订数据值. 在图表中展示趋势线 用户可以使用<chart>元素中的trendlines属性来显示图 ...

  6. Flash图表控件FusionCharts如何在图表标绘非连续数据

    你可能经常要以不完整的数据点绘制图表.例如,当绘制每月的销售图表时,你可能没有所有的月数据.所以,你可能只想以一个空白的区域来显示缺失的数据,不在这个区域中绘制任何东西.FusionCharts可以让 ...

  7. Flash图表控件FusionCharts如何自定义图表上的垂直线

    什么是垂直分割线 垂直(或条形图中的水平)分隔线是用来帮助用户分隔数据块的.可以被放置在任何两个数据点,即使是不规则的间隔也可以. <chart caption='Monthly Revenue ...

  8. [深入浅出Windows 10]QuickCharts图表控件库解析

    13.4 QuickCharts图表控件库解析     QuickCharts图表控件是Amcharts公司提供的一个开源的图表控件库,这个控件库支持WPF.Silverlight.和Windows等 ...

  9. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

随机推荐

  1. Sublime Text 3下安装Emmet的问题

    电脑装了Sublime Text 3,顺便安装了很多插件,今天编写前端HTML代码时,想用起前端常用的Emmet插件的功能,Emmet插件已经安装好了,奈何输入简写格式,按“CTRL+E”,没有反应. ...

  2. sublime text 侧边栏样式修改

    安装PackageResourceViewer 插件.快捷键 CTRL+SHIFT+P 打开 命令面板,输入 Package Control:Install Package (直接输入PCIP,四个单 ...

  3. C#中索引器Indexer的学习使用

    索引器 顾名思义,是用来索引的,那么C#中索引器是用来索引什么的呢 首先我们知道,C#中的数组是本身就可以索引的,那么C#中的类和结构呢,类和结构的实例是无法索引的,如果我们想让C#中类或者结构的实例 ...

  4. e.key && e.which && e.keyCode

    官方推荐用e.key来描述状态码,其他两种属性可能会在未来被废弃. 且key,keyCode和which 为只读属性   但是会有浏览器兼容性的问题,可以采用如下代码:   let key = ''; ...

  5. JWT使用过程中遇到的问题

    1.创建token的盐设置过于简单,出现secret key byte array cannot be null or empty. 异常 解决方法:jwt:config:key:hwy ------ ...

  6. nginx配置同一域名下,共存2个nodejs项目

    项目背景: 1.官网需要改版,使用nodejs nuxt框架进行重构 2.官网改版没有全部完成.但需要上线首页 项目需求: 1.让首页内容显示为新项目 2.让老官网的内容可以被访问到(比如www.n. ...

  7. Go:表驱动单元测试

    Go:表驱动单元测试 单元测试相当的重要,这几天实习由于单元测试没写好所以被骂了emmm 痛定思痛,立刻上网学习了一下,总算达到了预期的效果,所以写一篇文章记录一下 首先安装gotests $go g ...

  8. Spring基本原理模拟(IoC部分)

    package ioc; import java.io.File; import java.lang.reflect.Method; import java.util.Collections; imp ...

  9. 解读人:谭亦凡,Macrophage phosphoproteome analysis reveals MINCLE-dependent and -independent mycobacterial cord factor signaling(巨噬细胞磷酸化蛋白组学分析揭示MINCLE依赖和非依赖的分支杆菌索状因子信号通路)(MCP换)

    发表时间:2019年4月 IF:5.232 一. 概述: 分支杆菌索状因子TDM(trehalose-6,6’-dimycolate)能够与巨噬细胞C-型凝集素受体(CLR)MINCLE结合引起下游通 ...

  10. 验证您的Shell为Bash

    内容介绍 在管理Linux服务器时,命令行操作无疑是最为耗时的环节.对大多数用户而言,这意味着将大量时间用于操作Bash shell. 尽管大多数发行版都提供默认的用户类型与root prompts, ...