问题描述
Ext如何实现柱状图的3D效果图？ 问题补充：高级java工程师 写道
解决方案
[code="javanew Ext.Panel({ iconCls : 'chart',// 样式 title : 'ExtJS.com Visits and Pageviews, 2007/2008 (复杂样式)', frame : true, renderTo : 'container', width : 500, height : 300, layout : 'fit', items : { xtype : 'columnchart',// 柱状图 store : json_store, url : '../extjs/resources/charts.swf', xField : 'name',// X轴显示的值 yAxis : new Ext.chart.NumericAxis({ displayName : 'Visits', labelRenderer : Ext.util.Format .numberRenderer('0,0') }), // Y 轴显示的值 tipRenderer : function(chart, record, index, series) {// tip渲染 if (series.yField == 'visits') { return Ext.util.Format.number( record.data.visits, '0,0') + ' visits in ' + record.data.name; } else { return Ext.util.Format.number( record.data.views, '0,0') + ' page views in '+ record.data.name; } }, chartStyle : { padding : 10, animationEnabled : true,// 是否支持动态数据变化 font : {// 图表整体字体 name : 'Tahoma', color : 'silver', size : 11 }, border : { // color:'#3399FF', // size:1 }, background : { color : '#CCCCCC',// 背景颜色 alpha : 0.1 // 透明度 // image: // mode:stretch }, legend : {// 图例 display : "bottom", spacing : 2, padding : 5, font : { name : 'Tahoma', color : '#3366FF', size : 12, bold : true} }, dataTip : { // 鼠标经过,数据提示样式 padding : 5,// 提示内容与边框的距离 border : { color : "#FF3333", size : 1 },background : { color : 0xDAE7F6,// 背景颜色透明度 alpha : .8 // 背景颜色透明度 }, font : { name : 'Tahoma', color : '#FF3300', size : 10, bold : true} }, xAxis : { // X 轴 color : 0x69aBc8, // X轴颜色 majorTicks : {// 大刻度值 color : 0x69aBc8, length : 4 }, minorTicks : {// 小刻度值 color : 0x69aBc8, length : 2 }, majorGridLines : { size : 1, color : '#999999'}, // showLabels:false, labelDistance : 4 }, yAxis : { color : 0x69aBc8, majorTicks : {// 大刻度值 color : 0x69aBc8, length : 4 }, minorTicks : {// 小刻度值 color : 0x69aBc8, length : 2 }, majorGridLines : { size : 1, color : '#999999'} } }, series : [{ type : 'column',// 柱状图 displayName : '浏览数', yField : 'views', style : { // image : 'bar.gif', // mode : 'stretch', color : '#66CCFF'} }, { type : 'column', // line displayName : '点击数', yField : 'visits', style : { color : '#FF3300'// lineAlpha:0.5, // lineColor:'#FF3300', // alpha:0.8, // size:10 } }] } });
解决方案二：
推荐你使用funsionchart 可以去看看这个附件截图http://qq1988627.iteye.com/blog/1108952
解决方案三：
ext 3,4都不直接支持3D column不过你可以找几个插件http://stackoverflow.com/questions/6613639/does-extjs-support-3d-chartshttp://demos.theactivegroup.com/?demo=charts&script=fusion#http://www.sencha.com/forum/showthread.php?32434-ux.Media.ChartPack-2.1.2-%28Fusion-OFC2-amChart%29-released.
解决方案四：
new Ext.Panel({ iconCls : 'chart',// 样式 title : 'ExtJS.com Visits and Pageviews, 2007/2008 (复杂样式)', frame : true, renderTo : 'container', width : 500, height : 300, layout : 'fit', items : { xtype : 'columnchart',// 柱状图 store : json_store, url : '../extjs/resources/charts.swf', xField : 'name',// X轴显示的值 yAxis : new Ext.chart.NumericAxis({ displayName : 'Visits', labelRenderer : Ext.util.Format .numberRenderer('0,0') }), // Y 轴显示的值 tipRenderer : function(chart, record, index, series) {// tip渲染 if (series.yField == 'visits') { return Ext.util.Format.number( record.data.visits, '0,0') + ' visits in ' + record.data.name; } else { return Ext.util.Format.number( record.data.views, '0,0') + ' page views in '+ record.data.name; } }, chartStyle : { padding : 10, animationEnabled : true,// 是否支持动态数据变化 font : {// 图表整体字体 name : 'Tahoma', color : 'silver', size : 11 }, border : { // color:'#3399FF', // size:1 }, background : { color : '#CCCCCC',// 背景颜色 alpha : 0.1 // 透明度 // image: // mode:stretch }, legend : {// 图例 display : "bottom", spacing : 2, padding : 5, font : { name : 'Tahoma', color : '#3366FF', size : 12, bold : true} }, dataTip : { // 鼠标经过,数据提示样式 padding : 5,// 提示内容与边框的距离 border : { color : "#FF3333", size : 1 },background : { color : 0xDAE7F6,// 背景颜色透明度 alpha : .8 // 背景颜色透明度 }, font : { name : 'Tahoma', color : '#FF3300', size : 10, bold : true} }, xAxis : { // X 轴 color : 0x69aBc8, // X轴颜色 majorTicks : {// 大刻度值 color : 0x69aBc8, length : 4 }, minorTicks : {// 小刻度值 color : 0x69aBc8, length : 2 }, majorGridLines : { size : 1, color : '#999999'}, // showLabels:false, labelDistance : 4 }, yAxis : { color : 0x69aBc8, majorTicks : {// 大刻度值 color : 0x69aBc8, length : 4 }, minorTicks : {// 小刻度值 color : 0x69aBc8, length : 2 }, majorGridLines : { size : 1, color : '#999999'} } }, series : [{ type : 'column',// 柱状图 displayName : '浏览数', yField : 'views', style : { // image : 'bar.gif', // mode : 'stretch', color : '#66CCFF'} }, { type : 'column', // line displayName : '点击数', yField : 'visits', style : { color : '#FF3300'// lineAlpha:0.5, // lineColor:'#FF3300', // alpha:0.8, // size:10 } }] } });