0
我想爲我的條形圖實現日期範圍選擇器,下面是我寫的一些代碼。我正在顯示堆積的條形圖,它應根據所選的日期範圍動態更新。對此有任何建議。由於事先條形圖的日期範圍選擇器
_onDataLoadedfirst: function() {
Ext.create('Ext.panel.Panel', {
title: 'Choose a future date:',
width: 200,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'datepicker',
minDate: new Date(),
handler: function(picker, date) {
// do something with the selected date
}
}]
});
},
_onDataLoaded: function(store, data) {
this.add(
{
xtype: 'rallychart',
height: new_height,
//width: 500,
series: [
{
type: 'bar',
dataIndex: 'ObjectCount',
name: 'Count',
visible: true
}
],
//store: severityStore,
calculatorType: 'My.TrendCalc',
calculatorConfig : {},
chartConfig: {
chart: {
zoomType: 'xy',
type:'bar'
},
title: {
text: ' Open Defects(per Team and Severity)',
//align: 'center'
},
legend: {
reversed: true
},
//xField: 'Project',
xAxis: {
categories: new_projects,
type: 'text',
title: { text: 'Teams'},
minTickInterval: 5,
//labels : { rotation: 90 }
},
//yField: 'Severity',
yAxis: {
min: 0,
//categories: teamGroups,
title: {
text: 'Quantity of Defects'
}
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: 'black',
lineWidth: 1,
marker: {
enabled: false
},
step: true,
size: '100%'
},
bar: {
borderColor: "#000000",
borderWidth: 0.2
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white',
align: 'center',
x: 2,
y: 5,
formatter:function(){
if(this.y > 0)
return this.y;
},
style: {
textShadow: '0 0 2px black, 0 0 2px black'
}
}
}
},
},
//categories: teamGroups,
series: [{
name: "None",
data: get_values(proj_records, 0),
color: "#7CAED5"
},{
name: "Critical",
data: get_values(proj_records, 1),
color: "#66dacf"
},{
name: "Major",
data: get_values(proj_records, 2),
color: "#87c540"
},{
name: "Minor",
data: get_values(proj_records, 3),
color: "#9863b2"
},{
//Ext.Array.each(proj_records[0], function(rec) {
name: "Incidental",
data: get_values(proj_records, 4),
color: "#d73249"
//data: record.data;
//});
}]
}
);
}
謝謝尼克。我會試試這個。 – Sontya 2014-09-29 10:42:45