Javascript 如何在ExtJs中深入查看图表
这是我的示例应用程序,其中我有一个柱状图、一个雷达图和四个饼图。我必须深入了解柱状图。我以前开发过一个应用程序,在那里我没有使用MVC,我可以深入了解柱状图。但现在我使用EXTJS MVC,我不明白应该将深入了解的代码放在哪里。。这是我以前没有MVC的柱状图Javascript 如何在ExtJs中深入查看图表,javascript,extjs4.1,extjs4.2,extjs-mvc,Javascript,Extjs4.1,Extjs4.2,Extjs Mvc,这是我的示例应用程序,其中我有一个柱状图、一个雷达图和四个饼图。我必须深入了解柱状图。我以前开发过一个应用程序,在那里我没有使用MVC,我可以深入了解柱状图。但现在我使用EXTJS MVC,我不明白应该将深入了解的代码放在哪里。。这是我以前没有MVC的柱状图 window.weekWiseData = function(n, floor){ var data = [],i; var weeks = ['Week1','Week2','Week3','Week4']; floor = (
window.weekWiseData = function(n, floor){
var data = [],i;
var weeks = ['Week1','Week2','Week3','Week4'];
floor = (!floor && floor !== 0)? 20 : floor;
for (i = 0; i < (n || 4); i++) {
data.push({
name: weeks[i],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
var barWeekData;
window.dayWiseData = function(n, floor){
var data = [],i;
floor = (!floor && floor !== 0)? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.dayNames[i % 7],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
var barDayData;
window.generateData = function(n, floor) {
var data = [], i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name : Ext.Date.monthNames[i % 12],
data1 : Math.floor(Math.max((Math.random() * 100), floor)),
data2 : Math.floor(Math.max((Math.random() * 100), floor)),
data3 : Math.floor(Math.max((Math.random() * 100), floor)),
data4 : Math.floor(Math.max((Math.random() * 100), floor)),
data5 : Math.floor(Math.max((Math.random() * 100), floor)),
data6 : Math.floor(Math.max((Math.random() * 100), floor)),
data7 : Math.floor(Math.max((Math.random() * 100), floor)),
data8 : Math.floor(Math.max((Math.random() * 100), floor)),
data9 : Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
var barMonData = generateData(5, 0);
window.st = Ext.create('Ext.data.JsonStore', {
fields : [ 'name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6',
'data7', 'data9', 'data9' ],
data : barMonData
});
var baseColor = 'rgb(0,0,0)';
var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});
var bar = Ext.define('BarColumn', {
extend : 'Ext.chart.Chart',
alias : 'widget.BarColumn',
xtype : 'chart',
theme : 'Fancy',
animate : {
easing : 'bounceOut',
duration : 750
},
store : st,
background : {
fill : 'none'
},
gradients : [ {
'id' : 'v-1',
'angle' : 0,
stops : {
0 : {
color : 'rgb(212, 40, 40)'
},
100 : {
color : 'rgb(117, 14, 14)'
}
}
},
{
'id' : 'v-2',
'angle' : 0,
stops : {
0 : {
color : 'rgb(180, 216, 42)'
},
100 : {
color : 'rgb(94, 114, 13)'
}
}
}, {
'id' : 'v-3',
'angle' : 0,
stops : {
0 : {
color : 'rgb(43, 221, 115)'
},
100 : {
color : 'rgb(14, 117, 56)'
}
}
}, {
'id' : 'v-4',
'angle' : 0,
stops : {
0 : {
color : 'rgb(45, 117, 226)'
},
100 : {
color : 'rgb(14, 56, 117)'
}
}
}, {
'id' : 'v-5',
'angle' : 0,
stops : {
0 : {
color : 'rgb(187, 45, 222)'
},
100 : {
color : 'rgb(85, 10, 103)'
}
}
} ],
axes : [ {
type : 'Numeric',
position : 'left',
fields : [ 'data1' ],
minimum : 0,
maximum : 100,
label : {
renderer : Ext.util.Format.numberRenderer('0,0')
},
grid : {
odd : {
stroke : '#555'
},
even : {
stroke : '#555'
}
}
}, {
type : 'Category',
position : 'bottom',
fields : [ 'name' ]
} ],
series : [ {
type : 'column',
axis : 'left',
highlight : true,
label : {
display : 'insideEnd',
'text-anchor' : 'middle',
field : 'data1',
orientation : 'horizontal',
fill : '#fff',
font : '17px Arial'
},
renderer : function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
tips: {
trackMouse: true,
width: 120,
height: 50,
renderer: function(storeItem, item) {
var message='';
if(upBarColFlag == false){message= 'Click Here to see Detailed Data';}
else{message= 'Click Here to see Summarised Data';}
this.setTitle( message);
}
},
style : {
opacity : 0.95
},
listeners: {
'itemmouseup': function(o){
refreshGrid(o);
}
},
xField : 'name',
yField : 'data1'
} ]
});
var upBarColFlag =false;
var counter =0;
function refreshGrid(o){
if(counter==0 && upBarColFlag == false){
barWeekData = weekWiseData(4, 20);
st.loadData(barWeekData);
}
else if(counter==0 && upBarColFlag == true){
upBarColFlag = false;
counter--;
st.loadData(barMonData);
}
if(counter==1 && upBarColFlag == false){
upBarColFlag = true;
counter++;
barDayData = dayWiseData(7, 20);
st.loadData(barDayData);
}else if(counter==1 && upBarColFlag == true){
st.loadData(barWeekData);
}
if(upBarColFlag == false){
counter++;
}else{
counter--;
}
}
这是我的视图文件
var baseColor = 'rgb(0,0,0)';
var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
config)]);
});
var bar=Ext.define('Gamma.view.BarColumnChart', {
extend: 'Ext.chart.Chart',
alias : 'widget.barColumnChart',
height:300,
width:Ext.getBody().getViewSize().width*0.6,
id:'barColumnChart',
xtype : 'chart',
theme : 'Fancy',
animate : {
easing : 'bounceOut',
duration : 750
},
store : 'BarColumn',
background : {
fill : 'none'
},
gradients : [ {
'id' : 'v-1',
'angle' : 0,
stops : {
0 : {
color : 'rgb(212, 40, 40)'
},
100 : {
color : 'rgb(117, 14, 14)'
}
}
}, {
'id' : 'v-2',
'angle' : 0,
stops : {
0 : {
color : 'rgb(180, 216, 42)'
},
100 : {
color : 'rgb(94, 114, 13)'
}
}
},
{
'id' : 'v-3',
'angle' : 0,
stops : {
0 : {
color : 'rgb(43, 221, 115)'
},
100 : {
color : 'rgb(14, 117, 56)'
}
}
}, {
'id' : 'v-4',
'angle' : 0,
stops : {
0 : {
color : 'rgb(45, 117, 226)'
},
100 : {
color : 'rgb(14, 56, 117)'
}
}
}, {
'id' : 'v-5',
'angle' : 0,
stops : {
0 : {
color : 'rgb(187, 45, 222)'
},
100 : {
color : 'rgb(85, 10, 103)'
} ],
axes : [ {
type : 'Numeric',
position : 'left',
fields : [ 'count' ],
minimum : 0,
maximum : 3000,
label : {
renderer : Ext.util.Format.numberRenderer('0,0')
},
grid : {
odd : {
stroke : '#555'
},
even : {
stroke : '#555'
}
}
}, {
type : 'Category',
position : 'bottom',
fields : [ 'source' ]
} ],
series : [ {
type : 'column',
axis : 'left',
seriesId: 'col',
highlight : true,
label : {
display : 'insideEnd',
'text-anchor' : 'middle',
field : 'count',
orientation : 'horizontal',
fill : '#fff',
font : '12px Arial'
},
renderer : function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style : {
opacity : 0.95
},
xField : 'source',
yField : 'count'
} ],
afterComponentLayout: function(width, height, oldWidth, oldHeight) {
this.callParent(arguments);
this.fireEvent('afterlayout', this);
}
});
这是我的商店
Ext.define('Gamma.store.BarColumn', {
extend: 'Ext.data.Store',
model: 'Gamma.model.BarCol',
autoLoad: true,
pageSize: 100,
id:'BarColumn',
proxy: {
type: 'ajax',
url: 'CallRatiosAnalysis?methodName=callAnalysis',
reader: {
type: 'json',
root: 'topList',
totalProperty: 'totalCount',
successProperty: 'success'
}
}
});
有一个Highcharts插件 或未记录的单击事件 或者基于单击其他位置重新加载数据
虽然我还没有试过。有一个Highcharts插件 或未记录的单击事件 或者基于单击其他位置重新加载数据 虽然我还没有试过
Ext.define('Gamma.store.BarColumn', {
extend: 'Ext.data.Store',
model: 'Gamma.model.BarCol',
autoLoad: true,
pageSize: 100,
id:'BarColumn',
proxy: {
type: 'ajax',
url: 'CallRatiosAnalysis?methodName=callAnalysis',
reader: {
type: 'json',
root: 'topList',
totalProperty: 'totalCount',
successProperty: 'success'
}
}
});