2014-02-25 75 views
0

所以,我目前正在使用Angles.js(Chart.js的角度包裝)構建折線圖 - 使用模擬數據時效果非常好。將數組傳遞到工廠 - AngularJS

現在,使用chartData工廠中的模擬數據 - 它工作正常 - 繪製圖形。

我似乎無法做到的 - 將用戶數組中的每個用戶的「真實」數據替換爲模擬數據。對於每個用戶,他們都有一個活動數組 - 其中包含他們執行的每個活動的單獨對象。

現在我正在使用模擬日期(date.js) - 但我想要做的是 - 在chartData工廠內 - 用用戶真實活動數組替換data:[]數組。對於這些標籤,我有點不確定我將如何解決這個問題,但我很樂意接受這些想法!

小提琴:http://jsfiddle.net/ADukg/4843/

var myApp = angular.module('myApp',[]); 

function myCtrl($scope) { 

    myApp.factory("chartData", function() { 
    return { 
     1: { //This key is the user id 
      labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], 
      datasets: [{ 
       fillColor: "rgba(151,187,205,0)", 
       strokeColor: "#e67e22", 
       pointColor: "rgba(151,187,205,0)", 
       pointStrokeColor: "#e67e22", 
       data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user 
      }] 
     }, 
     2: { //This key is the user id 
      labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], 
      datasets: [{ 
       fillColor: "rgba(151,187,205,0)", 
       strokeColor: "#e67e22", 
       pointColor: "rgba(151,187,205,0)", 
       pointStrokeColor: "#e67e22", 
       data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user 
      }] 
     }, 
     3: { //This key is the user id 
      labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], 
      datasets: [{ 
       fillColor: "rgba(151,187,205,0)", 
       strokeColor: "#e67e22", 
       pointColor: "rgba(151,187,205,0)", 
       pointStrokeColor: "#e67e22", 
       data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user 
      }] 
     } 
    } 
}); 

$scope.competitionDetails = { 
     users: [{ 
      id: 2, 
      name: "John Thompson", 
      totalPoints: 40, 
      activities: [{ 
       id: 6431, 
       time: (57).minutes().ago(), 
       points: 20 
      }, { 
       id: 6431, 
       time: new Date(), 
       points: 20 
      }] 
     }, { 
      id: 3, 
      name: "Bob Andersson", 
      totalPoints: 60, 
      activities: [{ 
       id: 6431, 
       time: (1).days().ago, 
       points: 20 
      }, { 
       id: 6431, 
       time: (2).days().ago, 
       points: 20 
      }, { 
       id: 6431, 
       time: new Date(), 
       points: 20 
      }] 
     }, { 
      id: 1, 
      name: "Jimmy Smiths", 
      totalPoints: 140, 
      activities: [{ 
       id: 6431, 
       time: (3).days().ago, 
       points: 20 
      }, { 
       id: 6431, 
       time: (10).days().ago, 
       points: 20 
      }, { 
       id: 6432, 
       time: new Date(), 
       points: 100 
      }] 
     }] 
    }; 
} 
+0

1.你爲什麼在未定義的模塊上定義工廠? 2.你爲什麼要在控制器內包裝工廠聲明? – doodeec

+0

對不起,我試圖粘貼儘可能少的代碼。在我的應用程序中,工廠位於已定義的模塊中 - 而不是包裹在控制器內部。 – user2656127

回答

1

你似乎有東西倒退。您應該使用工廠將數據檢索到範圍,然後將圖表數據綁定到範圍變量。

您的工廠是而不是應該知道關於您的控制器的任何信息。工廠有可以從控制器調用的方法。如果你的圖表數據和實際數據來自不同的來源,你應該有兩個獨立的工廠返回這些信息。然後,您可以將此數據轉換爲適合與製圖組件一起使用的對象。

相關問題