javascript - directive returns the same array a few times angularjs -
i'm trying display highcharts ng-repeat displays 1 chart in every row here html:
<tr ng-repeat="perspective in perspectives"> <td> <highcharts-pie class="hc-pie" items="processed"></highcharts-pie> </td> <td>{{perspective.perfomance}}</td> <td>{{perspective.current}}</td> <td>{{perspective.previous}}</td> <td>{{perspective.variance}}</td> </tr> and data in controller:
$scope.perspectives=[ {perfomance:'a', current:'0', previous:'1', variance:'-1', plus:false, graphdata:[ {value: 32.4}, {value: 13.2}, {value: 84.5}, {value: 19.7}, {value: 22.6}, {value: 65.5}, {value: 77.4}, {value: 90.4}, {value: 17.6}, {value: 59.1}, {value: 76.8}, {value: 21.1} ] },{perfomance:'b', current:'1', previous:'0', variance:'1', plus:true, graphdata:[ {value: 22.4}, {value: 53.2}, {value: 45.5}, {value: 67.7}, {value: 92.6}, {value: 78.5}, {value: 71.4}, {value: 35.4}, {value: 21.6}, {value: 34.1}, {value: 68.8}, {value: 24.1} ] }]; $scope.processed = $scope.perspectives[0].graphdata.map(function (elem, i) { return [i, elem.value]; }) here directive:
.directive('hcpie', function () { return { restrict: 'c', replace: true, scope: { items: '=' }, controller: function ($scope, $element) { }, template: '<div id="container">not working</div>', link: function (scope, element) { var chart = new highcharts.chart({ chart: { renderto: element[0], height: 45, type: 'column', backgroundcolor: null }, title: { text: null }, subtitle: { text: null }, xaxis: { categories: [ 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec' ], labels: { enabled: false }, gridlinewidth: 0, minorgridlinewidth: 0, linecolor: 'transparent', ticklength: 0 }, yaxis: { gridlinewidth: 0, minorgridlinewidth: 0, linecolor: 'transparent', min: 0, title: { text: null }, labels: { enabled: false } }, tooltip: { enabled: false }, plotoptions: { column: { pointpadding: 0, borderwidth: 0, states: { hover: { color: '#ffffff' } } } }, legend: { enabled: false }, series: [{ name: 'value', color: '#ec5b00', data: scope.items }], exporting: { enabled: false } }); scope.$watch("items", function (processed) { chart.series[0].setdata(processed, true); console.log(processed) }, true); } } }); i'm trying display self chart every row, time displays same missed?
$scope.processed defined once, , processed graphdata values of first perspective.
consider following solution:
in controller:
$scope.process = function(graphdata) { return graphdata.map(function (elem, i) { return [i, elem.value]; }); } when using directive:
<tr ng-repeat="perspective in perspectives"> <td> <highcharts-pie class="hc-pie" items="process(perspective.graphdata)"></highcharts-pie> </td> .... </tr> 
Comments
Post a Comment