Erstellen eines Highchart für jeden Datensatz

Question

Ich bin mir sicher, dass jemand dieses Problem bereits entdeckt und hier gepostet hat, aber ich konnte es einfach nicht finden. Tut mir leid für den Betrogenen. Ich mache ein Dashboard, wo es für jeden Datensatz aus der Datenbank ein Diagramm geben muss.

Ich versuchte es mit dem Senden der Daten an eine Direktive und zeichnen Sie das Diagramm aus dem Controller der Direktive mit den Daten an die Richtlinie übergeben.

Dies ist die Teilansicht

<div class="row"> 
<div class="col col-md-9"> 
    <input type="text" class="form-control" ng-model="nameFilter" placeholder="Search for..."> 
</div> 
</div> 

<div class="row" ng-if="loading"> 
<div class="col col-md-6 col-md-offset-3"> 
    <img src="../img/loader.gif"/> 
</div> 
</div> 
<div class="row" ng-repeat="app in apps | filter: nameFilter"> 
    <app-card name="app.name" android="app.android" ios="app.ios" date="app.date"></app-card> 
</div> 

Die partielle sendet Daten an die Richtlinie

var app = angular.module('app'); 

app.directive('appCard', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      name: '=name', 
      android: '=android', 
      ios: '=ios', 
      date: '=date' 
     }, 
     templateUrl: 'http://testsite.nl/dashboard/partials/directives/app-card.html' 
    }; 
}); 

Die Richtlinien Vorlage

<div class="panel panel-info app-card" ng-controller="appCardController"> 
    <div class="panel-heading"> 
     <div class="row"> 
      <h4 class="col col-md-5">{{name}}</h4> 


     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="col col-md-12"> 
      <h3>Android downloads: {{android}}</h3> 
      <h3>iOS downloads: {{ios}}</h3> 
      <div id="container" style="min-width: 310px; height:250px; margin: 0 auto;"></div> 
     </div> 
    </div> 
</div> 

Und der Controller sieht aus wie dieses

app.controller('appCardController', ['$scope', function($scope){ 
    console.log("Downloads: " + $scope.android); 
    Highcharts.chart('container', { 
     chart: { 
      type: 'area' 
     }, 
     title: { 

      text: 'Aantal downloads' 
     }, 
     xAxis: { 
      allowDecimals: false, 
      categories: $scope.date 
     }, 
     yAxis: { 
      title: { text:'Donwloads' }, 
      floor: 0, 
      ceiling: getMaxDownloadCount() 
     }, 
     tooltip: { 
      pointFormat: '{series.name} <b>{point.y:,.0f}</b>' 
     }, 
     series: [{ 
      name: 'Android', 
      data: convertAndroidArrayToInts($scope.android) 
     }, 
     { 
      name: 'iOS', 
      data: convertIosArrayToInts($scope.ios) 
     }] 
    }); 

    function convertAndroidArrayToInts(array){ 
     var androidArray = new Array(); 
     for(var i =0; i < array.length; i++){ 
      androidArray.push(parseInt(array[i])); 
     } 

     return androidArray 
    } 
    function convertIosArrayToInts(array){ 
     var iosArray = new Array(); 
     for(var i =0; i < array.length; i++){ 
      iosArray.push(parseInt(array[i])); 
     } 
     console.log(iosArray); 
     return iosArray 
    } 
}]); 

Es zeigt die Anweisungsvorlagen mit den richtigen Namen und Array-Werten, das einzige Problem ist, dass nur ein Diagramm gezeichnet wird, das ist das Diagramm, das zum letzten Element in der Liste führt, aber in der ersten Vorlage liegt .

Wie könnte ich es so machen, dass jede Vorlage ein Diagramm enthält, das auf ihre Daten verweist?

Answer 1

antwortete ich eine sehr ähnliche Frage mit angular-chart Zusammenhang, meine Plunker sehen hier: https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview

Die Frage/Antwort hier: angular ng-repeat with directive

Die eigentliche Frage, die Sie mit der bedruckten Seite, dass die ID-Container, und Sie kann keine doppelten "id" -Attribute im DOM haben, so dass es nur die erste findet.

den „Namen“ Unter der Annahme, ist einzigartig, ändern Sie den Controller, so dass es die Richtlinien verwendet scope.name auf Highchart.chart und die Richtlinie Vorlage ändern, so dass die <div id="container"> wird <div id="{{name}}"

Danach sollten Sie eindeutige IDs haben und es wird funktionieren

Hoffnung, die Sinn macht.