Question

我需要创建显示各种值的条形图，例如“已创建”，“已关闭”，“已提交”数据，其中包含Y轴上的计数和x轴上的日期。

对于任何一个标准，我都能成功地做到这一点。但是我无法显示多个条形图。

以下是我目前使用的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Defect Trend App</title>
    <script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
    <script type="text/javascript">
        Rally.onReady(function () {
(function() {
  Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    launch: function() {    
      return this.createTrendChart();
    },  

    createTrendChart: function() {
       var ProjectOid;
      ProjectOid = this.getContext().getProject().ObjectID;
      var ReleaseOID = <My Release ID>;
      Ext.define('My.TrendCalc', {
        extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
        getMetrics: function() {
          return [
            {
              as: 'Defects',
              display: 'column',
              f: 'count'
            }
          ];
        }
      });
      this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
        storeType: 'Rally.data.lookback.SnapshotStore',
        storeConfig:  {
          find: {
            _TypeHierarchy: "Defect",
            State: {
              $lt: "Closed"
            },
            _ProjectHierarchy: ProjectOid,
            Release:  ReleaseOID
          },        
          fetch: ["_ValidFrom", "_ValidTo", "ObjectID"]
        },      

        calculatorType: 'My.TrendCalc',
        calculatorConfig: {},
        chartConfig: {
          chart: {
            zoomType: 'x',
            type: 'column'
          },
          title: {
            text: 'Defects over Time'
          },
          xAxis: {
            type: 'datetime',
            minTickInterval: 1
          },
          yAxis: {
            title: {
              text: 'Number of Defects'
            }
          }
        }
      });

      return this.add(this.myTrendChart);
    }
  });

}).call(this);            
            Rally.launchApp('CustomApp', {
                name:"Defect Trend App",
                parentRepos:""
            });

        });
    </script>
    <style type="text/css">
.app {
     /* Add app styles here */
}
    </style>
</head>
<body></body>
</html>

Answer 1

我不熟悉Rally的App SDK包装器，但我是TimeSeriesCalculator来自Lumenize的主要作者。您的情况正是Lumenize.TimeSeriesCalculator中的分组功能所针对的。请参阅documentation，了解TimeSeriesCalculator的工作原理。请看第二个标题为“按时间序列分组”的示例。此外，这里是a functioning jsfiddle of that group-by example。

您需要的关键位是：

metrics = [
  ...
  {f: 'groupByCount', groupByField: 'ScheduleState', allowedValues: allowedValues, prefix: 'Count '},
  ...
]

Answer 2

我不认为自己是这方面的专家，但我相信这对你有用......

我将您的代码作为基础并根据某些other code进行了修改，以获得我认为似乎是您想要的工作版本。下面是在Rally中运行的代码的屏幕截图。

我所拥有的数据在该系列中并没有太大的差异（大部分已经发布），所以它看起来很无趣。

您可能希望排除最终状态（因为我相信您通过$ lt：'已完成'代码在代码中执行了...我将其更改为$ lte：'暂时'已完成'。

example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>
Defect Trend App </title>
    <script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
    <script type="text/javascript">

    var states = ['Accepted','Released']; // all enum values for 'State'
    var field = 'ScheduleState'; // or 'State'
    var ReleaseOID = XXXXXX; // your release Oid

    Rally.onReady(function () {
            Ext.define('CustomApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                launch: function() {    
                    return this.createTrendChart();
                },  

                createTrendChart: function() {
                    var ProjectOid;
                    ProjectOid = this.getContext().getProject().ObjectID;


                    Ext.define('My.TrendCalc', {
                        extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
                        getDerivedFieldsOnInput: function() {
                            var m = _.map(states, function(state) {
                                return {
                                    "as": state,
                                    "f" : function(snapshot) { 
                                        var value = (snapshot[field] == state) ? 1 : 0;
                                        return value;
                                    }
                                }
                            })
                            return m;
                        },
                        getMetrics : function() {
                            var m = _.map(states, function(state) {
                                return {
                                    field: state,
                                    as: state,
                                    f: 'sum'
                                }
                            })
                            return m;
                        }
                    });

                    this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
                        storeType: 'Rally.data.lookback.SnapshotStore',
                        storeConfig:  {
                            find: {
                                _TypeHierarchy: "Defect",
                                State: {$lte: "Closed" },
                                _ProjectHierarchy: ProjectOid,
                                Release:  ReleaseOID
                            },        
                            fetch: ["_ValidFrom", "_ValidTo", "ObjectID", field],
                            hydrate: [field],
                            sort: { "_ValidFrom" : 1}
                        },      
                        calculatorType: 'My.TrendCalc',
                        calculatorConfig : {},
                        chartConfig: {
                            chart: {
                                    zoomType: 'xy',
                                    type:'column'
                            },
                            title: {
                                text: 'Defects over Time'
                            },
                            xAxis: {
                                type: 'datetime',
                                title: { text: 'When'},
                                minTickInterval: 5,
                                labels : { rotation: 90 }
                            },
                            yAxis: { title: { text: 'Count' } },
                            plotOptions: {
                                series: {
                                    stacking: 'normal'
                                }
                            }
                        }
                    });

                    return this.add(this.myTrendChart);
                }
            });
    });

    console.log("launching application");
    Rally.launchApp('CustomApp', {
        name:'Defect Trend App',
        parentRepos:""
    });
    </script>
</head>
<body>
</body>

Pastebin - http://pastebin.com/Vf6jniGZ

条形图与Rally.data.lookback.calculator.TimeSeriesCalculator

2 个答案: