Flash图表组件FusionCharts帮助文档十三:调整图表比例(百分比)

原创|其它|编辑:郝浩|2013-01-30 11:58:21.000|阅读 1753 次

概述:FusionCharts图表不仅允许你设置图表宽度和高度的绝对像素值,还允许设置宽度和高度的百分比值。 FusionCharts图表会根据父容器元素的尺寸自动调整图表的百分比大小。本文主要介绍如何利用代码方式动态调整FusionCharts图表的百分比大小。

相关链接:

FusionCharts图表不仅允许你设置图表宽度高度的绝对像素值,还允许设置宽度和高度的百分比值。 FusionCharts图表会根据父容器元素的尺寸自动调整图表的百分比大小。本文主要介绍如何利用代码方式动态调整FusionCharts图表的百分比大小。

<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%。"chartContainer" 是图表的容器元素。因此,图表的百分比宽度和高度取决于DIV的尺寸。

在上面的示例中,我们将DIV的宽度和高度分别设置为800像素和300像素。因此,图表的大小将自动调整为 640x300 像素,图表效果如下:

动态调整图表大小:

当图表的父容器大小改变时,FusionCharts XT能够自动地调整图表大小。操作步骤如下:

1、设置图表百分比
2、设置HTML图表容器,当调整浏览器大小时,图表容器大小也会自动调整。

当调整图表容器大小时,图表也会动态调整其大小。在下面的例子中,图表以全屏方式呈现在Web浏览器中。如果调整浏览器的大小,图表也会根据浏览器的大小而进行调整。

<html>
<head>
<title>My First chart using FusionCharts XT
- 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 XT 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 XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat