Question

我已经请求包含有关people的所有信息的json数据，并且我希望根据他的信息为每个人绘制高级图表。我看到了解决方案here，但似乎config始终会被最后li的配置信息覆盖。有没有办法为每个高级图保留不同的配置？

<div data-ng-repeat="a in people">
    <h4>Method: {{ a.name }}</h4>
    <highchart config="chartConfig"></highchart>
</div>

Answer 1

我遇到了同样的问题。事实证明，ng-repeat为每个项目创建了新范围，因此config指令的highchart属性应与ng-repeat中的设置相对应。在您的示例中，由于您按<div data-ng-repeat="a in people">重复了人，因此需要更改

<highchart config="chartConfig"></highchart>

到

<highchart config="a.chartConfig"></highchart>

应该有所帮助。

我创建了一个plunker作为示例。

Answer 2

您可以使用带控制器的局部视图。当然使用ng-highcharts。

就像这样，在你的主体中你有：

<div data-ng-repeat="person in people">
    <h4>Method: {{ person.name }}</h4>
    <div data-ng-include="'/partial/chart.html'"></div>
</div>

然后在你的部分，你有：

<div data-ng-controller="ChartController">
    <highchart config="chartConfig"></highchart>
</div>

然后在您的控制器中，您有：

app.controller('ChartController', function ($scope) {
    $scope.chartConfig = {
        chart: {
            type: 'pie'
        },
        title: {
            text: $scope.person.name
        },
        series: [{
            data: $scope.person.chartdata
        }]
    };
});

希望这有帮助。

Answer 3

您必须创建一个列表，然后将每个图表配置添加到该列表中。在图表列表中使用ng-repeat：

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

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

//The list who will contain each chart
$scope.chartlist = [];

//Chart 1
$scope.chartConfig = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15]
    }],

}

//Chart 2
$scope.chartConfig2 = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],

}

$scope.chartlist.push($scope.chartConfig);
$scope.chartlist.push($scope.chartConfig2);

});

然后在你的html中使用ng-repeat在图表列表中：

<div ng-app="myapp">
<div ng-controller="myctrl">         
    <div ng-repeat="char in chartlist" class="row">
        <highchart id="chart1" config="char" class="span10"></highchart>            
    </div>           
</div>

如果你想使用dinamic数据你可以使用foreach来创建每个图表配置，在这个例子中我在数组'a'中创建一个foreach对象：

$scope.chartlist = [];

var a = [[1, 2],[2,4]];

function chardata(){

    for (var i = 0; i < a.length; i++) {

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            },
            series: [{
                data: a[i]
            }],

        }
        $scope.chartlist.push($scope.chartConfig);
     }

}




chardata();

使用angularjs ng-repeat创建高级图表

3 个答案: