FusionCharts Suite XT图表控件如何动态改变图表的类型

作者:控件中国网   出处:控件中国网   2016-06-23 11:22:39   阅读:3

FusionCharts Suite XT图表控件为开发人员提供了很多交互式功能,如动态修改图表的大小以及图表类型,通过点击按钮可以轻松实现各种图表类型的转换,这样能更好地进行数据的比较和分析。要动态改变图表的类型需要使用到控件提供的chartType()方法,该方法可以让具有同种数据类型的图表之间进行转换,具体使用方法可以参考下面的部分代码:
FusionChart.png
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<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>&nbsp;&nbsp;<input name='chart-type' id='change-chart-type-bar' type='radio' value='bar2d' />&nbsp;<label for='change-chart-type-bar' style='display:inline;margin-bottom:0;'>Bar chart</label>&nbsp;&nbsp;<input name='chart-type' id='change-chart-type-column' type='radio' value='column2d' checked='true' />&nbsp;<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>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat