Question

我正在使用AngularJS和ASp.Net MVC构建仪表板。我是Angular的新手，我想做的是在网站上显示图表列表。每个图表都有Id，如果该Id通过GetChartData（）传递给Asp.Net控制器，它将返回图表的Json数据。这没有任何问题。

现在我在尝试迭代myListOfCharts时遇到了问题。每个图表和图表对象也显示标题“图表编号n”，但没有数据。我认为问题出在这个代码上，但无法弄清楚：

.success(function (data) {
                    return data;
                })

我的app.js文件：

(function() {
     var app = angular.module('aDashboard', ["ng-fusioncharts"]);
app.controller('fussionController', function ($scope, ChartService) {

    $scope.myListOfCharts = [1,2,3,4,5,6];

    getChartData();
    function getChartData(chartId) {
        ChartService.getChartData(chartId)
            .success(function (data) {
                return data;
            })
            .error(function (error) {
                alert($scope.status)
            });
    }
});

app.factory('ChartService', ['$http', function ($http) {
    var ChartService = {};
    ChartService.getChartData = function (chartId) {
        return $http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } });
    };
    return ChartService;
}]);

})();

我的html文件：

<div ng-controller="fussionController">
    <div ng-repeat="n in myListOfCharts">
        <h2>Chart number {{n}}</h2>
        <fusioncharts width="100%"
                      height="400"
                      type="MSCombi2D"
                      datasource="{{getChartData(n)}}"></fusioncharts>
    </div>
</div>

修改谢谢hawk-i-，您的回答略有修改： app.js文件：

app.controller('fussionController', function ($scope, ChartService) {

    $scope.myListOfCharts = [1,2,3,4,5,6];

    $scope.chartData = [{}, {}, {}, {}, {}, {}, {}, {}];

    $scope.getChartData = function (chartId) {
        ChartService.getChartData(chartId)
            .success(function (data) {
                $scope.chartData[chartId] = data;
            })
            .error(function (error) {
                alert($scope.status)
            });
    };
});

我的html文件：

<div ng-controller="fussionController">
        <div ng-repeat="n in myListOfCharts" ng-init="getChartData(n)">
            <h2>Chart number {{n}}</h2>
            <fusioncharts width="100%"
                          height="400"
                          type="MSCombi2D"
                          datasource="{{chartData[n]}}"></fusioncharts>
            <p><a class="btn btn-default" ng-click="getChartData(n)">Click me to change data</a></p>
        </div>
    </div>

但这不是一个非常优雅的解决方案，好像我将有一个ID为35或155的图表，我将不得不创建大型数组，其中大部分元素为空。知道如何改进这段代码吗？

Answer 1

问题是你将数据源绑定到函数调用getChartData（），这不是观察值的变化。

将其绑定到属性：

(function() {
     var app = angular.module('aDashboard', ["ng-fusioncharts"]);
app.controller('fussionController', function ($scope, ChartService) {

    $scope.myListOfCharts = [1,2,3,4,5,6];
    var chartData = [];

    $scope.getChartData = function(chartId) {
        ChartService.getChartData(chartId)
            .success(function (data) {
                chartData[chartId] = data;
            })
            .error(function (error) {
                alert($scope.status)
            });
    }
});

app.factory('ChartService', ['$http', function ($http) {
    var ChartService = {};
    ChartService.getChartData = function (chartId) {
        return $http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } });
    };
    return ChartService;
}]);

})();

并在你的html中，在ng-init中调用getChartData，如：

<div ng-controller="fussionController">
    <div ng-repeat="n in myListOfCharts" ng-init="$scope.getChartData(n)">
        <h2>Chart number {{n}}</h2>
        <fusioncharts width="100%"
                      height="400"
                      type="MSCombi2D"
                      datasource="{{chartData[n]}}"></fusioncharts>
    </div>
</div>

修改

如果你把你的id视为字符串，即。 [＆＃39; 1＆＃39;，＆＃39; 2＆＃39;，＆＃39; 3＆＃39;，...]和var charData = {};那么你的图表数据数组将是关联数组，你不会有初始化问题。

Answer 2

检查https://github.com/pablojim/highcharts-ng

以下是一个例子：

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

$scope.addPoints = function () {
    var seriesArray = $scope.highchartsNG.series
    var rndIdx = Math.floor(Math.random() * seriesArray.length);
    seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
};

$scope.addSeries = function () {
    var rnd = []
    for (var i = 0; i < 10; i++) {
        rnd.push(Math.floor(Math.random() * 20) + 1)
    }
    $scope.highchartsNG.series.push({
        data: rnd
    })
}

$scope.removeRandomSeries = function () {
    var seriesArray = $scope.highchartsNG.series
    var rndIdx = Math.floor(Math.random() * seriesArray.length);
    seriesArray.splice(rndIdx, 1)
}

$scope.options = {
    type: 'line'
}

$scope.swapChartType = function () {
    if (this.highchartsNG.options.chart.type === 'line') {
        this.highchartsNG.options.chart.type = 'bar'
    } else {
        this.highchartsNG.options.chart.type = 'line'
    }
}

$scope.highchartsNG = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],
    title: {
        text: 'Hello'
    },
    loading: false
}

});

jsFiddle示例 http://jsfiddle.net/pablojim/cp73s/

如何将图表数据返回到图表？

2 个答案: