棒グラフに日付範囲セレクターを実装したいのですが、以下は私が書いたコードの一部です。積み上げ棒グラフを表示しています。選択した日付範囲に応じて動的に更新されます。これに関する提案。前もって感謝します
_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;
//});
}]
}
);
}
これは、日付ピッカーで別の日付が選択されたときに新しいデータで再ロードされるオープン/クローズの欠陥のチャートの例です。metrics環境の[状態]ドロップダウンで許可された値を反映するようにオブジェクトを変更する必要があります。
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var that = this;
var minDate = new Date(new Date() - 86400000*90); //milliseconds in day = 86400000
var datePicker = Ext.create('Ext.panel.Panel', {
title: 'Choose a date:',
width: 200,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'rallydatepicker',
minDate: minDate,
handler: function(picker, date) {
that.onDateSelected(date);
}
}]
});
this.add(datePicker);
},
onDateSelected:function(date){
this._date = date;
this.defineCalculator();
this.makeChart();
},
defineCalculator: function(){
var that = this;
Ext.define("MyDefectCalculator", {
extend: "Rally.data.lookback.calculator.TimeSeriesCalculator",
getMetrics: function () {
var metrics = [
{
field: "State",
as: "Open",
display: "column",
f: "filteredCount",
filterField: "State",
filterValues: ["Submitted","Open"]
},
{
field: "State",
as: "Closed",
display: "column",
f: "filteredCount",
filterField: "State",
filterValues: ["Fixed","Closed"]
}
];
return metrics;
}
});
},
makeChart: function(){
if (this.down('#myChart')) {
this.remove('myChart');
}
var timePeriod = new Date(new Date() - this._date);
var project = this.getContext().getProject().ObjectID;
var storeConfig = this.createStoreConfig(project,timePeriod);
this.chartConfig.calculatorConfig.startDate = this._date;
this.chartConfig.calculatorConfig.endDate = new Date();
this.chartConfig.storeConfig = storeConfig;
this.add(this.chartConfig);
},
createStoreConfig : function(project, validFrom ) {
return {
listeners : {
load : function(store,data) {
console.log("data",data.length);
}
},
filters: [
{
property: '_ProjectHierarchy',
operator : 'in',
value : [project]
},
{
property: '_TypeHierarchy',
operator: 'in',
value: ['Defect']
},
{
property: '_ValidFrom',
operator: '>',
value: validFrom
}
],
autoLoad : true,
limit: Infinity,
fetch: ['State'],
hydrate: ['State']
};
},
chartConfig: {
xtype: 'rallychart',
itemId : 'myChart',
chartColors: ['Red', 'Green'],
storeConfig: { },
calculatorType: 'MyDefectCalculator',
calculatorConfig: {
},
chartConfig: {
plotOptions: {
column: { stacking: 'normal'}
},
chart: { },
title: { text: 'Open/Closed Defects' },
xAxis: {
tickInterval: 1,
labels: {
formatter: function() {
var d = new Date(this.value);
return ""+(d.getMonth()+1)+"/"+d.getDate();
}
},
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
]
}
}
});
例はこのgithubリポジトリにあります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加