C3圖表的AngularJS指令不顯示所有圖形

Question

我正在首次使用C3圖表，並遇到了稱爲angular_c3_simple的角度指令。 https://github.com/wasilak/angular-c3-simple

我試過這個與靜態數據，它一切正常，但通過服務的JSON數據它沒有按預期工作。

我想顯示2個不同的圖形，但它正確顯示第一個圖形，但對於第二個圖形顯示未定義的值。

請幫我解決這個問題，不知道我失蹤的地方。

這裏是我的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

我想你錯過了在配置bindto選項，所以，該圖沒有正確顯示。

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" 
     }; 
    })  
});