FusionCharts Suite XT图表控件为开发人员提供了很多交互式功能,如动态修改图表的大小以及图表类型,通过点击按钮可以轻松实现各种图表类型的转换,这样能更好地进行数据的比较和分析。要动态改变图表的类型需要使用到控件提供的chartType()方法,该方法可以让具有同种数据类型的图表之间进行转换,具体使用方法可以参考下面的部分代码:
<html>
<head>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
insertMode: "prepend",
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"
}]
},
"events": {
"beforeRender": function(evt, args) {
var controllers = evt.sender._controllers,
radio = [],
radElem,
val;
if (!controllers) {
controllers = evt.sender._controllers = document.createElement("div");
controllers.innerHTML = "<form><label style='display:inline;margin-bottom:0;'><input name='chart-type' id='change-chart-type-line' type='radio' value='line' /> Line chart</label> <input name='chart-type' id='change-chart-type-bar' type='radio' value='bar2d' /> <label for='change-chart-type-bar' style='display:inline;margin-bottom:0;'>Bar chart</label> <input name='chart-type' id='change-chart-type-column' type='radio' value='column2d' checked='true' /> <label for='change-chart-type-column' style='display:inline;margin-bottom:0;'>Column chart</label></form>";
controllers.style.cssText = "text-align: Center;"
var clearText = args.container.firstChild;
while (clearText) {
((clearText.nodeType === 3) || (clearText.nodeName === "#text")) && clearText.parentNode.removeChild(clearText);
clearText = clearText.nextSibling;
}
args.container.appendChild(controllers);
radio = controllers.getElementsByTagName('input');
for (i = 0; i < radio.length; i++) {
radElem = radio[i];
if (radElem.type === 'radio') {
radElem.onchange = function() {
val = this.getAttribute('value');
val && evt.sender.chartType(val);
};
}
}
}
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
</body>
</html>