色色色H,四虎最新网站,午夜免费影院

Flash圖表組件FusionCharts幫助文檔十三：調整圖表比例（百分比）

原創|其它|編輯：郝浩|2013-01-30 11:58:21.000|閱讀 1979 次

概述：FusionCharts圖表不僅允許你設置圖表寬度和高度的絕對像素值，還允許設置寬度和高度的百分比值。 FusionCharts圖表會根據父容器元素的尺寸自動調整圖表的百分比大小。本文主要介紹如何利用代碼方式動態調整FusionCharts圖表的百分比大小。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

FusionCharts圖表不僅允許你設置圖表寬度和高度的絕對像素值，還允許設置寬度和高度的百分比值。 FusionCharts圖表會根據父容器元素的尺寸自動調整圖表的百分比大小。本文主要介紹如何利用代碼方式動態調整FusionCharts圖表的百分比大小。

<div id="chartContainer" style="width:800px; height:300px;">
This text is replaced by the chart
</div>
<script type="text/javascript"></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"></script>
</body>
</html>