0

我需要创建显示各种值的条形图，例如“已创建”、“已关闭”、“已提交”数据，其中 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>
4

2 回答 2

2

我不熟悉 Rally 的 App SDK 包装器，但我是 Lumenize 的主要作者，TimeSeriesCalculator 来自哪里。您的情况正是 Lumenize.TimeSeriesCalculator 中的分组功能的设计目的。请参阅文档以详细了解 TimeSeriesCalculator 的工作原理。请看第二个标题为“时间序列分组示例”的示例。此外，这是该分组示例的功能 jsfiddle。

您需要的关键位是：

metrics = [
  ...
  {f: 'groupByCount', groupByField: 'ScheduleState', allowedValues: allowedValues, prefix: 'Count '},
  ...
]
于 2014-02-19T12:10:20.623 回答
2

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

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

我拥有的数据在该系列中没有太大的差异（大多数已发布），因此看起来无趣。

您可能希望排除最终状态（正如我相信您在代码中通过 $lt:'Completed'... 我暂时更改为 $lte:'Completed' 所做的那样）。

例子

<!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

于 2014-02-20T01:11:35.890 回答