App.offi.chartstore = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'07年七月', visits: 245000, views: 3000000},
{name:'07年八月', visits: 240000, views: 3500000},
{name:'07年九月', visits: 355000, views: 4000000},
{name:'07年十月', visits: 375000, views: 4200000},
{name:'07年十一月', visits: 490000, views: 4500000},
{name:'07年十二月', visits: 495000, views: 5800000},
{name:'08年一月', visits: 520000, views: 6000000},
{name:'08年二月', visits: 620000, views: 7500000}
]
});
/**
* 图表Charts
* @class App.offi.cenyebaoChart
* @extends Ext.Panel
*/
App.offi.cenyebaoChart = Ext.extend(Ext.Panel, {
title: "图表面板",
layout: 'fit',
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: "linechart",
store: App.offi.chartstore,
xField: 'name',
yField: "visits",
listeners: {
itemclick: function(o) { //节点单击事件监听
A.log("开始执行‘节点单击’事件");
var rec = App.offi.chartstore.getAt(o.index);
A.log("取得记录:{0}", rec.data);
Msg.alert(String.format("您查看的是{0}的信息!", rec.get("name")));
A.log("‘节点单击’事件完成");
}
}
}],
bbar: ["->", {
xtype: "button",
text: "底部菜单工具按钮",
menu: [{
text: "简单线型图(样式)",
listeners: {
scope: this,
click: this.onEasyExampleBtnClick
}
}, {
text: "柱形图(复杂示例)",
listeners: {
scope: this,
click: this.onComplexExampleBtnClick
}
}, {
text: "饼图",
listeners: {
scope: this,
click: this.onPieBtnClick
}
}, {
text: "条形图",
listeners: {
scope: this,
click: this.onBarBtnClick
}
}]
}]
});
App.offi.cenyebaoChart.superclass.initComponent.call(this);
},
//条形图
onBarBtnClick: function() {
A.log("条形图");
var mainTab = ACom.getMainTab(),
barTab = mainTab.get("MAIN_TAB_BARCHART");
if(!barTab) {
barTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
id: "MAIN_TAB_BARCHART",
title: "条形图",
xtype: "offi-barChart",
closable: true
});
}
mainTab.setActiveTab(barTab);
},
//饼图
onPieBtnClick: function() {
A.log("饼图");
var mainTab = ACom.getMainTab(),
pieTab = mainTab.get("MAIN_TAB_PIECHART");
if(!pieTab) {
pieTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
id: "MAIN_TAB_PIECHART",
title: "饼图",
xtype: "offi-pieChart",
closable: true
});
}
mainTab.setActiveTab(pieTab);
},
//柱形图
onComplexExampleBtnClick: function() {
A.log("柱形图");
var mainTab = ACom.getMainTab(),
complexTab = mainTab.get("MAIN_TAB_COMPLEXCHART");
if(!complexTab) {
complexTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
id: "MAIN_TAB_COMPLEXCHART",
title: "柱形图(复杂示例)",
xtype: "offi-ComplexChart",
closable: true
});
}
mainTab.setActiveTab(complexTab);
},
//简单线型图(样式)
onEasyExampleBtnClick: function() {
A.log("简单线型图(样式)");
var mainTab = ACom.getMainTab(),
newTab = mainTab.get("MAIN_TAB_EASYCHART");
if(!newTab) {
newTab = mainTab.insert(mainTab.items.indexOf(this.ownerCt) + 1, {
id: "MAIN_TAB_EASYCHART",
title: "简单线性图(样式)",
xtype: "offi-EasyChart",
closable: true
});
}
mainTab.setActiveTab(newTab);
}
});
Ext.reg("offi-cenyebaoChart", App.offi.cenyebaoChart);
//条形图数据
App.offi.barStore = new Ext.data.JsonStore({
// comedy_喜剧;action_动作;drama_戏剧;thriller_惊悚片;
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
]
});
//条形图
App.offi.BarExample = Ext.extend(Ext.Panel, {
title: "条形图",
padding: 50,
layout: "fit",
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: "stackedbarchart",
store: App.offi.barStore,
yField: 'year',
series: [{
xField: 'comedy',
displayName: "Comedy"
}, {
xField: "action",
displayName: "Action"
}, {
xField: 'drama',
displayName: "Drama"
}, {
xField: "thriller",
displayName: "Thriller"
}],
xAxis: new Ext.chart.NumericAxis({
labelRenderer: Ext.util.Format.usMoney,
title: "票房",
stackingEnabled: true //接在一起,成一条而已。
})
}]
});
App.offi.BarExample.superclass.initComponent.call(this);
}
});
Ext.reg("offi-barChart", App.offi.BarExample);
//饼图数据
App.offi.pieStore = new Ext.data.JsonStore({
fields: ['season', 'total'],
data: [{
season: "夏季",
total: 1500000
}, {
season: "秋季",
total: 2450000
}, {
season: "冬季",
total: 1170000
}, {
season: "春季",
total: 1840000
}]
});
//饼图
App.offi.PieExample = Ext.extend(Ext.Panel, {
title: "饼图",
padding: 100,
layout: "fit",
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: "piechart",
store: App.offi.pieStore,
dataField: 'total', //数据
categoryField: 'season',
tipRenderer: function(chart, record, index, series) {
return record.data.season + '收益值为' + Ext.util.Format.number(record.data.total, '0,0');
},
extraStyle: {
legend: {
display: 'bottom', //在底部显示类别
padding: 10,
font: {
family: '宋体',
size: 16 //字体大小
}
}
}
}]
});
App.offi.PieExample.superclass.initComponent.call(this);
}
});
Ext.reg("offi-pieChart", App.offi.PieExample);
//柱形图
App.offi.ComplexExample = Ext.extend(Ext.Panel, {
title: "柱形图(复杂示例)",
layout: "fit",
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: "columnchart",
store: App.offi.chartstore,
xField: 'name',
series: [{
type: "column", //柱形
displayName: "PageViews", //提示框里显示的名称
yField: 'views',
style: {
image: "bar.gif",
mode: "stretch",
color: "#607B8B"
}
}, {
type: "line",
displayName: "Visits",
yField: 'visits',
style: {
color: "#B8860B"
}
}],
yAxis: new Ext.chart.NumericAxis({
displayName: "visits",
labelRenderer: Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer: function(chart, record, index, series) {
if(series.yField == 'visits') {
return '在' + record.data.name + '中,有'+Ext.util.Format.number(record.data.visits,'0,0'+'人次访问!');
} else if(series.yField == 'views') {
return '在'+record.data.name+'中有'+Ext.util.Format.number(record.data.views,'0,0')+'访问量!';
}
},
chartStyle: {
padding: 50,
animationEnable: true,
font: { // 对轴文字进行修饰
name: "Tahoma",
color: 0x15428B,
size: 11
},
dataTip: { // 节点提示框
padding: 5,
border: { // 边框,颜色默认为黑色。
size: 3,
color: 0x99bbe8 //淡蓝
},
background: {
color: 0xDAE7F6, //淡蓝
alpha: .8 //透明度:值越小越透明。
},
font: {
name: "Tahoma", //宋体
color: 0x15428B,
size: 11,
bold: true
}
},
xAxis: {
//color: 0x69aBc8,
majorGridLines: {size: 1, color: 0xdfe8f6}
},
yAxis: {
//color: 0x69aBc8, // Y轴颜色
majorTicks: {length: 16}, //这设置Y轴分割线长短
minorTicks: {length: 8},
majorGridLines: {size: 1, color: 0xdfe8f6} //Y轴横过来的线:0xdfe8f6为微蓝色;
}
}
}]
});
App.offi.ComplexExample.superclass.initComponent.call(this);
}
});
Ext.reg("offi-ComplexChart", App.offi.ComplexExample);
//简单线型图(样式)
App.offi.EasyExample = Ext.extend(Ext.Panel, {
title: "简单线型图(样式)",
layout: "fit",
padding: 50,
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: "linechart",
store: App.offi.chartstore,
xField: "name",
yField: "visits",
yAxis: new Ext.chart.NumericAxis({ //对Y轴数据进行格式化。
displayName: "visit",
labelRenderer: Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer: function(chart, record) { //节点提示框
return '在' + record.data.name + "中,有" + Ext.util.Format.number(record.data.visits, '0,0')+'人次访问!';
}
}]
});
App.offi.EasyExample.superclass.initComponent.call(this);
}
});
Ext.reg("offi-EasyChart", App.offi.EasyExample);