AngularJS Direktive für C3-Diagramm nicht alle Graphen anzeigen

Question

Ich arbeite mit C3-Charts zum ersten Mal und stieß auf die eckige Anweisung namens eckigen_c3_simple. https://github.com/wasilak/angular-c3-simple

Ich versuchte dies mit statischen Daten und es hat alles gut funktioniert, aber mit den JSON-Daten durch den Dienst funktioniert es nicht wie erwartet.

Ich versuche, 2 verschiedene Diagramme anzuzeigen, aber es zeigt nur die ersten Diagramme korrekt, aber für das zweite Diagramm zeigt es undefined Wert.

Bitte helfen Sie mir damit, nicht sicher, wo ich vermisse.

Hier ist meine plunkr: https://plnkr.co/edit/NYxGjWGRzj4XVzc5XjpG?p=preview

<div class="row"> 
    <c3-simple id="chart" config="chart"></c3-simple> 
</div> 
<div class="row"> 
    <c3-simple id="chart1" config="chart1"></c3-simple> 
</div> 

Answer 1

Ich glaube, Sie die BindTo Option in der Konfiguration verpasst haben, so wurde das Diagramm nicht korrekt angezeigt.

Example

app.controller('analyticsController', function($scope, analyticsService, c3SimpleService, $http, $q) { 
    console.log("I have entered here"); 
    var chart_size = { width: 480, height: 280 }; 
    var chart_legend = {position: 'bottom'}; 
    $scope.chart = {}; 
    $scope.chart1 = {}; 
    analyticsService.getCounts() 
    .then(function (dataattr){ 
     $scope.chart= { 
       data: { 
       columns: [ 
        ['Production', dataattr.data.meta_charts_wl.wl_in_production], 
        ['Experimental', dataattr.data.meta_charts_wl.wl_in_experimental], 
        ], 
        type : 'donut', 
        colors: { 
        Production: '#1E91CF', 
        Experimental: '#FBA6A6', 
       }, 
       }, 
       donut: { 
        title: "Area details:", 
        }, 
       size: chart_size, 
       legend: chart_legend, 
       bindto: "#chart" 
     }; 
     $scope.chart1= { 
       data: { 
       columns: [ 
        ['Production_1', dataattr.data.meta_charts_wl.wl_policymatched], 
        ['Experimental_1', dataattr.data.meta_charts_wl.wl_policy_not_matched], 
        ], 
        type : 'donut', 
        colors: { 
        Production_1: '#1E91CF', 
        Experimental_1: '#FBA6A6', 
       }, 
       }, 
       donut: { 
        title: "Area details:", 
        }, 
       size: chart_size, 
       legend: chart_legend, 
       bindto: "#chart1" 
     }; 
    })  
});