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>

我发现它清洁器移动这种逻辑的缩小视图，进入代码;在我的示例中，我已经对数据组&进行了硬编码，但您可以想象地创建一个服务，从数据构造一些或所有对象，然后可以在控制器/视图中使用该对象。