带有 ng-repeat 的 Angular Highcharts 图表列表答案

【问题标题】：Angular Highcharts list of charts with ng-repeat带有 ng-repeat 的 Angular Highcharts 图表列表
【发布时间】：2013-09-09 14:18:27
【问题描述】：

我正在尝试构建一个 kpi 的应用程序并且我正在使用 angular js 我想创建一个图表列表，每个列表项显示不同的值，每个列表项图表根据我的模型具有不同的类型。

我基于 highcharts-ng 指令。

我想通过 highchart 指令注入一些属性，如值、标题名称和图表类型当我输入以下 ng-repeat 时，它将根据 attrs 创建我的图表列表

     <li ng-repeat="li in list">
       <highchart config="chart" chartTitle="{{li.name}}" kpiValue="{{li.data}}">
       </highchart>
     </li>

你可以在这里找到我的代码 http://jsfiddle.net/Cp73s/62/

链接到 highcharts-ng ： https://github.com/pablojim/highcharts-ng

【问题讨论】：

标签： javascript angularjs highcharts

【解决方案1】：

高图表从config 属性中获取其选项。在你的情况下 chart 对象。

因为您想要不同图表的不同值。您必须根据需要创建的图表数量创建尽可能多的配置。

这是展示方法的小提琴

http://jsfiddle.net/cmyworld/cSek7/

基本上，我创建了一个控制器来管理这些复杂性，并在highChartController 中设置了初始对象设置。我只是为 title 属性做的，但想法是一样的。

【讨论】：

我正在尝试一般性地解决问题，如果我可以通过 html 获取配置对象，为什么它不能与其他属性一起使用？我必须为不同的图表类型编写不同的指令吗？
如果您查看指令的实现，它会创建一个包含配置对象的隔离范围。您所有的操作都应该通过这个配置对象进行，因为该指令不会监视其他任何内容。
您不需要为每种类型的图表编写不同的指令。您需要为每个渲染图表创建多个配置对象（就像您创建了一个 chart 对象）。
谢谢，但我仍然很困惑，如何通过模型将数据获取到每个图表实例中？
@user2212908 看看我的小提琴，这应该可以完成工作。

【解决方案2】：

您必须创建一个列表，然后将每个图表配置添加到该列表中。在图表列表中使用 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>

如果你想使用动态数据，你可以使用 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();

【讨论】：