Question

所以我目前正在使用Angles.js（Chart.js的角度包装器）构建折线图 - 当使用模拟数据时效果非常好。

现在，使用chartData工厂中的模拟数据 - 它工作正常 - 绘制图形。

我似乎无法做的 - 将模拟数据替换为每个用户的“真实”数据，如下面的users数组中所示。对于每个用户，他们都有一个活动数组 - 它包含一个单独的对象，用于他们执行的每个活动。

现在我也在使用模拟日期（date.js） - 但我想做的是 - 在chartData工厂中 - 用用户真实活动数组替换data：[]数组。对于标签，我有点不确定我将如何解决这个问题，但我对这些想法持开放态度！

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
            }]
        }]
    };
}

Answer 1

你好像倒退了。您应该使用工厂将数据检索到范围，然后将图表数据绑定到范围变量。

您的工厂不应该知道您的控制器的任何信息。工厂有可以从控制器调用的方法。如果您的图表数据和实际数据来自不同的来源，您可能应该有两个单独的工厂来返回此信息。然后，您可以将此数据转换为适合与图表组件一起使用的对象。

将数组传递到工厂 - AngularJS

1 个答案: