c3-angular-directive-c3圖表的多個類別和標籤

Question

我正在嘗試爲其中一個需求構建堆疊條形圖。圖表應該像下面這樣：

我使用它使用c3.js建立圖表C3-角指令庫

。這裏的問題是多種類別。第一級分類爲Proj1 and Proj2，下一級爲R1.0 and R2.0。我試過以下內容：

<c3chart bindto-id="stackedBarChart" show-labels="true"> 
    <chart-column column-id="x" column-values="R1.0, R2.0" /> 

    <chart-column column-id="Proj1Item1" column-values="10,20" column-type="bar" /> 
    <chart-column column-id="Proj2Item1" column-values="20,20" column-type="bar" /> 

    <chart-column column-id="Proj1Item2" column-values="30,10" column-type="bar" /> 
    <chart-column column-id="Proj2Item2" column-values="20,10" column-type="bar" />   

    <chart-group group-values="Proj1Item1,Proj2Item1" /> 
    <chart-group group-values="Proj1Item2,Proj2Item2" /> 

    <chart-axes values-x="x" /> 

    <chart-axis> 
     <chart-axis-x axis-position="outer-center" axis-type="category"></chart-axis-x> 
    </chart-axis> 
</c3chart> 

這樣做的結果完全不同。我不知道如何做到這一點。

此外，還建議是否有任何其他圖表類型，這將有助於我代表我的數據。

Answer 1

我不確定您是否可以使用當前版本的c3.js（0.4.10）獲得您想要的數據，特別是多行X軸和顯示每個組的切片的圖例，但你可以接近。

如果您沒有完全投入現有的指令，您可以使用angular-c3-directive（完全披露：我是作者），它幾乎與c3.generate()通常所做的幾乎相同的對象，並顯示它的圖表。

angular.module('app', ['c3']) 
 

 
.controller('MainCtrl', ['$scope', function($scope) { 
 
    $scope.chart = { 
 
    data: { 
 
     x: 'x', 
 
     columns: [ 
 
     ['x', 'R1.0', 'R2.0'], 
 
     ['Proj1 (item 1)', 1, 2], 
 
     ['Proj1 (item 2)', 7, 8], 
 
     ['Proj2 (item 1)', 3, 4], 
 
     ['Proj2 (item 2)', 11, 16] 
 
     ], 
 
     groups: [ 
 
     ['Proj1 (item 1)', 'Proj1 (item 2)'], 
 
     ['Proj2 (item 1)', 'Proj2 (item 2)'], 
 
     ], 
 
     colors: { 
 
     'Proj1 (item 1)': '#cc0000', 
 
     'Proj1 (item 2)': '#0000cc', 
 
     'Proj2 (item 1)': '#ff0000', 
 
     'Proj2 (item 2)': '#0000ff', 
 
     }, 
 
     type: 'bar' 
 
    }, 
 
    legend: { 
 
     position: 'right' 
 
    }, 
 
    tooltip: { 
 
     grouped: false, 
 
    }, 
 
    axis: { 
 
     x: { 
 
     type: 'categories' 
 
     } 
 
    } 
 
    }; 
 
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/atavakoli/angular-c3-directive/0.3.0/angular-c3.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet"/> 
 

 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <div c3="chart"></div> 
 
</div>

我發現它清潔器移動這種邏輯的縮小視圖，進入代碼;在我的示例中，我已經對數據組&進行了硬編碼，但您可以想象地創建一個服務，從數據構造一些或所有對象，然後可以在控制器/視圖中使用該對象。