將數據添加到圖表

我找吞吐量圖表的一個變種，具有主要有...

過去12在底部
總數個月圖的左側
堆疊列故事和缺陷數
脊柱線穿過去的故事點，輔助y爲點

軸所以我到目前爲止，所有這些工作都在我的拉力賽應用中，除了我所有的號碼目前都是硬編碼的。我如何才能將這些信息正確地輸入到我的圖表中？

我看到了一個使用商店的例子，但看起來古怪而誠實，我不知道我在哪裏看到它嘗試和複製。

代碼如下，如果任何人有意見或想法我將不勝感激：

<!DOCTYPE html> 
    <html> 

    <head> 
     <meta http-equiv="refresh" content="240" /> 
     <title>Throughput Chart</title> 
     <script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js?debug=true"></script> 
     <script type="text/javascript"> 

     Rally.onReady(function() { 

     Ext.create('Ext.Container', { 
       items: [ 
        { 
         xtype: 'rallychart', 
         height: 400, 
         series: [{ 
          name: 'Defect Count', 
          data: [2, 2, 3, 2, 1, 4, 2, 3, 5, 3, 5, 4] 
         }, { 
          name: 'Story Count', 
          data: [3, 4, 4, 2, 5, 3, 4, 5, 6, 3, 4, 8] 
         }, { 
          name: 'Story Points', 
          color: '#89A54E', 
          type: 'spline', 
          yAxis: 1, 
          data: [55, 34, 50, 31, 44, 61, 55, 22, 50, 48, 34, 44] 
         }], 
         chartConfig: { 
         chart: { 
          type: 'column' 
          }, 
          title: { 
           text: 'Kanban State Counts', 
           align: 'center' 
          }, 
         xAxis: { 
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
          }, 
         yAxis: [{ 
         title: { 
           text: 'Count' 
          }, 
         stackLabels: { 
          enabled: true, 
          style: { 
           fontWeight: 'bold', 
          } 
         } 
        }, 
        { 
         opposite: true, 
         title: { 
          text: 'Story Points' 
         } 
       }], 
         } 
        } 
       ], 
       renderTo: Ext.getBody().dom 
      }); 

    }); 
     </script> 



     <style type="text/css"> 
     </style> 
    </head> 
    <body> 
    </body> 
    </html>

來源

2012-12-12 user1537867

下面是在WsapiDataStore使用用戶故事數據提供了基本的例子。代碼簡單地總結了ScheduleState的故事並將計數添加到Ext.data.store中。然後，應用程序使用Rally.ui.chart.ChartView組件在條形圖中按計劃狀態顯示故事計數。

<!DOCTYPE html> 
<html> 
<head> 
    <title>ChartExample</title> 

    <script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js"></script> 

    <script type="text/javascript"> 
     Rally.onReady(function() { 
      Ext.define('CustomApp', { 
       extend: 'Rally.app.App', 
       componentCls: 'app', 

       launch: function() { 
        Ext.create('Rally.data.WsapiDataStore', { 
         model: 'UserStory', 
         autoLoad: true, 
         listeners: { 
          load: this._onDataLoaded, 
          scope: this 
         } 
        }); 
       }, 

       _onDataLoaded: function(store, data) { 
        var records = []; 
        var scheduleStateGroups = ["Defined","In-Progress","Completed","Accepted"] 

        // State count variables 
        var definedCount = 0; 
        var inProgressCount = 0; 
        var completedCount = 0; 
        var acceptedCount = 0; 

        // Loop through returned data and group/count by ScheduleState 
        Ext.Array.each(data, function(record) { 
         //Perform custom actions with the data here 
         //Calculations, etc. 

         scheduleState = record.get('ScheduleState'); 

         switch(scheduleState) 
         { 
          case "Defined": 
           definedCount++; 
           break; 
          case "In-Progress": 
           inProgressCount++; 
           break; 
          case "Completed": 
           completedCount++; 
           break; 
          case "Accepted": 
           acceptedCount++; 
         } 
        }); 

        //Create a store containing the chart data 
        var scheduleStateStore = Ext.create('Ext.data.Store', { 
         fields: ['KanbanState', 'ObjectID_Count'], 
         data: { 
          rows: [ 
           {ScheduleState: 'Defined', ObjectCount: definedCount}, 
           {ScheduleState: 'InProgress', ObjectCount: inProgressCount}, 
           {ScheduleState: 'Completed', ObjectCount: completedCount}, 
           {ScheduleState: 'Accepted', ObjectCount: acceptedCount} 
          ] 
         }, 
         proxy: { 
          type: 'memory', 
          reader: { 
           type: 'json', 
           root: 'rows' 
          } 
         } 
        }); 

        // Configure and Add the chart 
        this.add(
         { 
          xtype: 'rallychart', 
          height: 400, 
          series: [ 
           { 
            type: 'column', 
            dataIndex: 'ObjectCount', 
            name: 'Count', 
            visible: true 
           } 
          ], 
          store: scheduleStateStore, 
          chartConfig: { 
           chart: { 
           }, 
           title: { 
            text: 'User Story Schedule State Counts', 
            align: 'center' 
           }, 
           xField : 'ScheduleState', 
           xAxis: [ 
            { 
             categories: scheduleStateGroups, 
             title: { 
              text: 'ScheduleState' 
             } 
            } 
           ], 
           yAxis: { 
            title: { 
             text: 'Count' 
            } 
           }, 
           plotOptions : { 
            column: { 
             color: '#F00' 
            }, 
            series : { 
             animation : { 
              duration : 2000, 
              easing : 'swing' 
             } 
            } 
           } 
          } 
         } 
        ); 
       } 
      }); 
      Rally.launchApp('CustomApp', { 
       name: 'ChartExample' 
      }); 
     }); 
    </script> 

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

來源

2012-12-17 01:05:24

將數據添加到圖表

回答

相關問題