ExtJs4实战流量统计系统----流量数据展示(四)
这块内容,是点击左侧栏目列表中的栏目后,加载到中间内容区域(Tab选项卡)的的内容。
这个,在整个系统中,是相对简单的功能。
一个Panel,上边是Chart,下边是详细数据。
唯一值得说一下的就是图表类型切换,也就是:饼状图和柱状图的切换。
实现过程
我原本是希望只切换Chart组件的axes和series属性,但简单尝试了一下,没成功,由于时间关系,便放弃了。
转而采用最简单的方式:就是把现有Chart销毁,然后再重新创建新的Chart。
切换按钮代码:
this.turnAction = Ext.create(‘Ext.Action‘, { text: ‘切换为柱状图‘, iconCls: ‘icon_chartbar‘, scope: this, handler: function () { this.chartType = !this.chartType; this.buildChart(true); } });
具体实现代码:
buildChart: function (isRemove) { var me = this; if (isRemove) { this.chartBox.removeAll(true); } if (this.chartType) { var strTitle = ""; var areaType = this.areaTypeField.getValue(); if (areaType == ‘1‘) { strTitle = ‘省份‘; } else if (areaType == ‘2‘) { strTitle = ‘大区‘; } //--修改切换按钮的图标及标题 this.turnAction.setIconCls(‘icon_chart_pie‘); this.turnAction.setText(‘切换为饼状图‘); this.areaChart = Ext.create(‘Ext.chart.Chart‘, { shadow: true, theme: ‘Base:gradients‘, animate: true, store: this.dataStore, axes: [{ type: ‘Numeric‘, position: ‘left‘, fields: [‘PV‘], title: ‘PV‘, grid: true }, { type: ‘Category‘, position: ‘bottom‘, fields: [‘Name‘], title: strTitle }], series: [{ type: ‘column‘, axis: ‘left‘, highlight: true, tips: { trackMouse: true, width: 140, height: 28, renderer: function (storeItem, item) { this.setTitle(storeItem.get(‘Name‘) + ‘ PV: ‘ + storeItem.get(‘PV‘) + ‘ ‘); } }, xField: ‘Name‘, yField: ‘PV‘ }] }); } else { //--修改切换按钮的图标及标题 this.turnAction.setIconCls(‘icon_chartbar‘); this.turnAction.setText(‘切换为柱状图‘); this.areaChart = Ext.create(‘Ext.chart.Chart‘, { shadow: true, legend: { position: ‘right‘ }, animate: true, //insetPadding: 60, theme: ‘Base:gradients‘, store: me.dataStore, series: [{ type: ‘pie‘, angleField: ‘PV‘, showInLegend: true, highlight: { segment: { margin: 20 } }, tips: { trackMouse: true, renderer: function (storeItem, item) { if (me.totalPV <= 0) { me.dataStore.each(function (rec) { me.totalPV += storeItem.get(‘PV‘); }); } var strMsg = storeItem.get(‘Name‘) + ‘: ‘ + storeItem.get(‘PV‘) + ‘(‘ + Math.round(storeItem.get(‘PV‘) / me.totalPV * 100) + ‘%)‘; this.update(strMsg); } }, label: { field: ‘Name‘, display: ‘rotate‘, contrast: true, font: ‘18px Arial‘ } }] }); } if (isRemove) { this.chartBox.add(this.areaChart); } }
当然,Chart图表和下边的详细,所绑定的数据是一样的。。。
=========================分隔线====================================
其他的数据展示功能,都差不多,只是数据不一样,再就是图表类型不一样,就不一一介绍了。
下一篇,说说权限控制及实现吧。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。