FusionCharts Suite XT如何点击缩略图切换显示不同的图表

作者:控件中国网   出处:控件中国网   2016-12-13 09:26:14   阅读:0

FusionCharts Suite XT是一款完全使用JavaScript来创建各种图表、仪表、地图、实时图表的综合性控件,里面包含了众多的图表类型和各种图表功能,这篇文章主要介绍如何实现在一个图表绘制区域内,通过点击图表的缩略图来实现不同种类的图表切换,如下图,当点击左边的缩略图时,右边会显示不同类型的图表,实现该功能的完整代码可以参考下面,开发人员可以在控件中国网上下载该产品的试用版进行测试并且可以根据自己的需求对事例进行修改:
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: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Harry's SuperMart",
            "subCaption": "Monthly revenue for last year",
            "xAxisName": "Month",
            "yAxisName": "Amount",
            "numberPrefix": "$",
            "theme": "fint",
            "rotateValues": "1",
            "exportEnabled": "1"
        },
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000",
            "anchorRadius": "10",
            "anchorBorderColor": "0372AB",
            "anchorBgColor": "E1f5ff"
        }, {
            "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) {
            // Create div for thumbnails
            var thumbnails = document.createElement('div');
            thumbnails.innerHTML = '<div id="thumbnail-column"></div><div id="thumbnail-pie"></div><div id="thumbnail-bar"></div></div>';
            thumbnails.style.cssText = 'display:inline-block; float:left;';
 
            // Append thumbnails div before chart-container
            args.container.parentNode.insertBefore(thumbnails, args.container);
 
            // Append line-breaker div after chart-container
            var divBreak = document.createElement('div');
            divBreak.style.cssText = 'clear: both;';
            args.container.parentNode.insertBefore(divBreak, args.container.nextSibling);
 
            // Set CSS style for chart-container
            args.container.style.cssText = 'padding:5px; font-size:11px; display:inline-block; float:left; clear:right;';
        },
        'renderComplete': function(evt, args) {
            var createThumbNail = function(chartId, width, height, divId) {
                // we clone the chart first and then set new width and height
                var chartRef = FusionCharts(chartId),
                    clonedChart = chartRef.clone({
                        "width": width,
                        "height": height,
                        "events": {}
                    });
                // turn off properties which are not required
                clonedChart.setChartAttribute({
                    "showValues": "0",
                    "showLabels": "0",
                    "animation": "1",
                    "exportEnabled": "0",
                    "showTooltip": "0",
                    "showHoverEffect": "1",
                    "showYAxisValues": "0",
                    "caption": "",
                    "subCaption": "",
                    "xAxisName": "",
                    "yAxisName": "",
                    "showXAxisLine": "0",
                    "showYAxisLine": "0",
                    "numDivLines": "0",
                    "enableSlicing": "0",
                    "enableRotation": "0"
                });
                // listend for the chartClick event to render the detailed chart
                clonedChart.addEventListener('chartClick', function() {
                    if (chartId != evt.sender.id) {
                        // rendering the new chart
                        FusionCharts(chartId).render(args.container);
                    }
                });
                // create the thumbnail
                clonedChart.render(divId);
            };
 
            // Create instance of all charts (including current one)
            var revenueChartColumn = evt.sender.clone({
                id: 'revenue-chart-column',
                events: {}
            });
            var revenueChartPie = evt.sender.clone({
                type: 'pie2d',
                id: 'revenue-chart-pie',
                events: {}
            });
            var revenueChartBar = evt.sender.clone({
                type: 'bar2d',
                id: 'revenue-chart-bar',
                events: {}
            });
 
            // create thumbnails for all the three charts
            createThumbNail('revenue-chart-column', 100, 100, 'thumbnail-column');
            createThumbNail('revenue-chart-pie', 100, 100, 'thumbnail-pie');
            createThumbNail('revenue-chart-bar', 100, 100, 'thumbnail-bar');
        }
    }
}
);
    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