在FusionCharts中既可以通過像素又可以通過百分比（相對于其容器）來指定圖表的尺寸。若以像素為單位指定，那么無論在什么尺寸的屏幕或設(shè)備上查看圖表，圖表的尺寸都將保持不變。但是，如果該圖表的寬度和高度設(shè)定為容器的百分比，在渲染圖表時(shí)轉(zhuǎn)換為像素，如果容器的尺寸改變了，則圖表會(huì)自動(dòng)關(guān)聯(lián)其容器相應(yīng)的改變尺寸。
< 立即下載FusionCharts最新版本>
在初始化時(shí)設(shè)置圖表寬度和高度像素
指定圖表的寬度和高度像素代碼如下：
< 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>
在初始化時(shí)設(shè)置圖表寬度和高度百分比
如果你想創(chuàng)建一個(gè)根據(jù)其父容器尺寸自動(dòng)調(diào)整的圖表，你可以設(shè)置圖表的寬度和高度的百分比，代碼如下：
< 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>
你只需確保將圖表的父容器設(shè)置為根據(jù)瀏覽器尺寸改變或頁面上的其它改變（如元件被添加或刪除等）動(dòng)態(tài)改變自身的尺寸。
每當(dāng)容器元素調(diào)整尺寸，圖表也會(huì)立即調(diào)整自身的尺寸。
在某些情況下，如果HTML容器元素本身并沒有獲得適當(dāng)?shù)膶挾然蚋叨龋ㄓ捎跒g覽器渲染錯(cuò)誤），圖表看起來像被擠壓，或出現(xiàn)在了不該出現(xiàn)的位置。如果發(fā)生這種情況，那么你就必須指定圖表的尺寸像素。
通過resizeTo()方法修改圖表的寬度和高度
如果你已經(jīng)初始化了一個(gè)圖表，你還可以在客戶端通過調(diào)用resizeTo（）方法動(dòng)態(tài)修改其尺寸。
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輸入框中輸入新的圖表尺寸，點(diǎn)擊Resize按鈕，就能動(dòng)態(tài)修改圖表的尺寸了。
使用chartType()方法動(dòng)態(tài)修改圖表類型
在月收入圖表中，若你希望通過按一下按鈕就將柱形圖轉(zhuǎn)換成折線圖，標(biāo)準(zhǔn)的做法是創(chuàng)建一個(gè)折線圖實(shí)例，傳遞相同的JSON數(shù)據(jù)，然后渲染它。
而FusionCharts通過chartType()方法使你輕松實(shí)現(xiàn)圖表類型的更改。這種方法可以讓你從一個(gè)圖表類型轉(zhuǎn)換為另一種圖表類型（只要它們數(shù)據(jù)類型相同，例如：單系列）。
如下所示，點(diǎn)擊圖表下面的圖表類型，就能傳染出相應(yīng)的圖表了：
代碼如下：
< 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>
你還可以提供一個(gè)新的數(shù)據(jù)源和格式作為chartType(chartType, options)方法的第二個(gè)可選參數(shù)，用來根據(jù)圖表修改其數(shù)據(jù)。
購買最新正版授權(quán)！""
慧都年終盛典火爆開啟，一年僅一次的最強(qiáng)促銷，破冰鉅惠不容錯(cuò)過！！優(yōu)惠詳情點(diǎn)擊查看>>
標(biāo)簽：
JavaScript 圖表圖表庫數(shù)據(jù)可視化數(shù)據(jù)分析圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營 
4次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線