Question

我正在尝试为其中一个要求构建堆积条形图。图表应如下所示：

我正在使用c3-angular-directive库，它使用c3.js来构建图表。这里的问题是多种类别。

第一级分类是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>

我发现将这种逻辑移出视图并进入代码是一种更清洁的方法;我已经硬编码数据＆amp;在我的示例中，您可以设想创建一个服务，从数据中构造部分或全部$scope.chart对象，然后您可以在控制器/视图中使用它。

c3-angular-directive-c3图表的多个类别和标签

1 个答案: