條形圖的日期範圍選擇器

Question

我想爲我的條形圖實現日期範圍選擇器，下面是我寫的一些代碼。我正在顯示堆積的條形圖，它應根據所選的日期範圍動態更新。對此有任何建議。由於事先

  _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; 
          //}); 
         }] 
        } 
       ); 
      } 

Answer 1

下面是開放/關閉缺陷的圖表，當在日期選擇器選擇了花葯日期用新的數據重新裝入的一個例子。您需要更改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' 
        } 
       } 
      ] 
      } 
    } 

}); 

該示例位於this github repo。