Extjs柱状图

Extjs柱状图

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 } }] } });

 

 

 

转载自：http://xiejin2008.iteye.com/blog/660163

 

为了您的安全，请只打开来源可靠的网址

打开网站    取消

来自: http://hi.baidu.com/sxh1990/blog/item/d0f71c1b5cb5ce60dbb4bd16.html