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图表和下边的详细，所绑定的数据是一样的。。。

=========================分隔线====================================

其他的数据展示功能，都差不多，只是数据不一样，再就是图表类型不一样，就不一一介绍了。

下一篇，说说权限控制及实现吧。