频道栏目
首页 > 资讯 > 其他综合 > 正文

最新版FusionCharts3D柱状图

16-06-25        来源:[db:作者]  
收藏   我要投稿

1、实现源码

 


<script src="../js/jquery-3.0.0.js"></script><script type="text/javascript" src="../js/FusionCharts/fusioncharts.js" ></script>

<script>
			$(document).ready(function(){
				FusionCharts.ready(function () {
				    var column3DChart = new FusionCharts({
				        type: 'column3d',
				        renderAt: 'column3D',
				        width: '1350',
				        height: '650',
				        dataFormat: 'json',
				        dataSource: {
				            "chart": {
				                "caption": "一年收入统计",
				                "xAxisName": "月份",
				                "yAxisName": "收入明细",
				                "paletteColors": "#0075c2",
				                "valueFontColor": "#000000",
				                "baseFont": "Helvetica Neue,Arial",
				                "captionFontSize": "16",
				                "subcaptionFontSize": "16",
				                "subcaptionFontBold": "1",
				                "placeValuesInside": "0",
				                "rotateValues": "1",
				                "showShadow": "0",
				                "divlineColor": "#999999",               
				                "divLineIsDashed": "1",
				                "divlineThickness": "1",
				                "divLineDashLen": "1",
				                "divLineGapLen": "1",
				                "canvasBgColor": "#ffffff"
				            },
				
				            "data": [
				                {
				                    "label": "一月",
				                    "value": "3689"
				                },
				                {
				                    "label": "二月",
				                    "value": "5874"
				                },
				                {
				                    "label": "三月",
				                    "value": "4512"
				                },
				                {
				                    "label": "四月",
				                    "value": "6785"
				                },
				                {
				                    "label": "五月",
				                    "value": "1568"
				                },
				                {
				                    "label": "六月",
				                    "value": "2745"
				                },
				                {
				                    "label": "七月",
				                    "value": "4758"
				                },
				                {
				                    "label": "八月",
				                    "value": "9652"
				                },
				                {
				                    "label": "九月",
				                    "value": "3425"
				                },
				                {
				                    "label": "十月",
				                    "value": "2014"
				                },
				                {
				                    "label": "十一月",
				                    "value": "3652"
				                },
				                {
				                    "label": "十二月",
				                    "value": "7421"
				                }
				            ]
				        }
				    });
				    column3DChart.render();
				});
			});
		</script>
 

2、实现结果

 

 
相关TAG标签
上一篇:jquery选择器中的空格与大于号)、加号+与波浪号~的区别
下一篇:uboot移植准备四
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站