如何ExtJS的

Question

向下鑽取圖表這是我的示例應用程序，在那裏我有一個條形圖和一個雷達和四個餡餅charts.I必須鑽到barChart.I先前已開發的應用程序，我沒有使用MVC和在那裏，我能向下鑽取的bar.But我現在用EXTJS MVC我不明白，我應該把鑽到代碼..這是我以前沒有MVC BARCHART ..

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

} 

這是我不BARCHART MVC現在我已經創造了MVC structure.This應用是我的控制器文件....

Ext.define('Gamma.controller.ControlFile', { 

extend : 'Ext.app.Controller', 

//define the stores 
stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'], 


models :  ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'], 

    views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'], 

refs: [{ 
ref: 'radar', 
selector: 'radarChart' 
},{ 
ref: 'sms', 
selector: 'smsPie' 
},{ 
ref: 'gprs', 
selector: 'gprsPie' 
},{ 
ref: 'mms', 
selector: 'mmsPie' 
},{ 
ref: 'voice', 
selector: 'voicePie' 
}], 

initializedEvents: false, 
init: function() { 
this.control({ 
    '#barColumnChart': { 
     afterlayout: this.afterChartLayout 
    } 
}); 
}, 
afterChartLayout: function(){ 
var me=this; 
if(this.initializedEvents==true) return; 
this.initializedEvents=true; 
Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj){ 






    // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']); 

    // var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']; 
    var source=obj.storeItem.data['source']; 
    var count=obj.storeItem.data['count']; 
    me.dataBaseCall(source,count); 
}); 

這是我查看文件...

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' 
} 
    } 

}); 

Answer 1

有一個Highcharts插件

http://www.sencha.com/forum/showthread.php?93669-Highcharts-adapter-and-plugin-for-ExtJS

或無證點擊事件

http://druckit.wordpress.com/2013/03/19/ext-js-and-sencha-touch-charts-drill-down/基於點擊

或重新加載數據的其他地方

http://www.sencha.com/forum/showthread.php?257113-Can-any-one-help-to-acheive-the-Drilldown-Charts-in-EXTJS

雖然我還沒有嘗試過。