Создание диаграмм с использованием angularjs ng-repeat

Question

Я запросил json-данные, содержащие всю информацию о people, и я хочу получить диаграммы для каждого человека на основе его информации. Я видел решение here, но кажется, что config всегда будет переопределяться последней информацией о конфигурации li. Есть ли способ сохранить разные конфигурации для каждого highchart?

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

Answer 1

Вы можете использовать частичный вид с контроллером. Использование 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 2

Я столкнулся с той же проблемой. Оказывается, что ng-repeat создает новую область для каждого элемента, поэтому атрибут config директивы highchart должен соответствовать настройке в ng-repeat. В вашем примере, так как вы повторите людей, <div data-ng-repeat="a in people">, изменяя

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

в

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

должно помочь.

В качестве примера я создал plunker.

Answer 3

Вам необходимо создать список, а затем добавить в этот список каждую конфигурацию диаграммы. Использование нг-повтор в списке карт:

//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 использование нг-повторе в списке карт:

<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 для создания каждой конфигурации диаграммы, в этом примере я создаю объект foreach диаграммы в массиве 'a':

$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();