在FusionCharts中既可以通過像素又可以通過百分比（相對于其容器）來指定圖表的尺寸。若以像素為單位指定，那么無論在什么尺寸的屏幕或設備上查看圖表，圖表的尺寸都將保持不變。但是，如果該圖表的寬度和高度設定為容器的百分比，在渲染圖表時轉換為像素，如果容器的尺寸改變了，則圖表會自動關聯其容器相應的改變尺寸。
< 立即下載FusionCharts最新版本>
在初始化時設置圖表寬度和高度像素
指定圖表的寬度和高度像素代碼如下：
< html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render("chartContainer");
})
</script>
</head>
< body>
<div id="chartContainer">FusionCharts XT will load here!</div>
< /body>
< /html>
在初始化時設置圖表寬度和高度百分比
如果你想創建一個根據其父容器尺寸自動調整的圖表，你可以設置圖表的寬度和高度的百分比，代碼如下：
< html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "100%",
"height": "100%",
"dataFormat": "json",
"dataSource":{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render("chartContainer");
})
</script>
</head>
< body>
<div id="parentContainer">
<div id="chartContainer">FusionCharts XT will load here!</div>
</div>
< /body>
< /html>
你只需確保將圖表的父容器設置為根據瀏覽器尺寸改變或頁面上的其它改變（如元件被添加或刪除等）動態改變自身的尺寸。
每當容器元素調整尺寸，圖表也會立即調整自身的尺寸。
在某些情況下，如果HTML容器元素本身并沒有獲得適當的寬度或高度（由于瀏覽器渲染錯誤），圖表看起來像被擠壓，或出現在了不該出現的位置。如果發生這種情況，那么你就必須指定圖表的尺寸像素。
通過resizeTo()方法修改圖表的寬度和高度
如果你已經初始化了一個圖表，你還可以在客戶端通過調用resizeTo（）方法動態修改其尺寸。
JSON:
{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart caption="Monthly revenue for last year" subcaption="Harry's SuperMart" xaxisname="Month" yaxisname="Revenues (In USD)" numberprefix="$" theme="fint">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
如下圖所示，在Width和Height輸入框中輸入新的圖表尺寸，點擊Resize按鈕，就能動態修改圖表的尺寸了。
使用chartType()方法動態修改圖表類型
在月收入圖表中，若你希望通過按一下按鈕就將柱形圖轉換成折線圖，標準的做法是創建一個折線圖實例，傳遞相同的JSON數據，然后渲染它。
而FusionCharts通過chartType()方法使你輕松實現圖表類型的更改。這種方法可以讓你從一個圖表類型轉換為另一種圖表類型（只要它們數據類型相同，例如：單系列）。
如下所示，點擊圖表下面的圖表類型，就能傳染出相應的圖表了：
代碼如下：
< html>
<head>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
var radio = [],
radElem,
val,
revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render();
radio = document.getElementsByTagName('input');
for (i = 0; i < radio.length; i++) {
radElem = radio[i];
if (radElem.type === 'radio') {
radElem.onclick = function(){
val = this.getAttribute('value');
val && revenueChart.chartType(val);
};
}
}
});
</script>
</head>
< body>
<div id="chartContainer">FusionCharts will render here</div>
<div id='controllers'>
<label><input name='chart-type' id='line' type='radio' value='line' /> Line chart</label>
<label><input name='chart-type' id='bar' type='radio' value='bar2d' /> Bar chart</label>
<label><input name='chart-type' id='column' type='radio' value='column2d' checked='true' /> Column chart</label>
</div>
< /body>
< /html>
你還可以提供一個新的數據源和格式作為chartType(chartType, options)方法的第二個可選參數，用來根據圖表修改其數據。
購買最新正版授權！""
慧都年終盛典火爆開啟，一年僅一次的最強促銷，破冰鉅惠不容錯過！！優惠詳情點擊查看>>
標簽：
JavaScript 圖表圖表庫數據可視化數據分析圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
金喜正規買球 
25次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線