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

我正试图为其中一个需求构建一个堆叠条形图。图表应如下所示：

我正在使用c3 angular指令库，它使用c3.js构建图表。这里的问题是多个类别

第一级分类是

Proj1和Proj2

，下一级分类是

R1.0和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>

这会导致完全不同的结果。我不知道如何做到这一点

---

还建议是否有其他图表类型可以帮助我表示我所拥有的数据。

我不确定您是否可以使用当前版本的c3.js（0.4.10），特别是多行X轴和显示每组切片的图例，准确地获得所需的数据，但您可以接近

如果您没有完全投入到现有指令中，您可以使用（完全公开：我是作者），它使用与

c3.generate（）

通常使用的对象几乎相同的对象，并从中显示图表

angular.module（'app'，['c3']））
.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.chart={
数据：{
x：‘x’，
栏目：[
['x'、'R1.0'、'R2.0']，
[‘项目1’、1、2]，
[‘项目1（项目2）’、7、8]，
[‘项目二（第1项）’第3、4款]，
['Proj2（项目2）'、11、16]
],
小组：[
[‘项目J1（项目1）’，‘项目J1（项目2）’，
[‘项目J2（项目1）’，‘项目J2（项目2）’，
],
颜色：{
“项目1（项目1）”：“cc0000”，
‘项目1（项目2）’：‘0000cc’，
“项目2（项目1）”：“ff0000”，
“项目2（项目2）”：“#0000ff”，
},
类型：'bar'
},
图例：{
位置：'右'
},
工具提示：{
分组：假，
},
轴线：{
x:{
类型：“类别”
}
}
};
}]);
我不确定您是否可以使用当前版本的c3.js（0.4.10），特别是多行X轴和显示每个组的一个片段的图例，获得您想要的，但您可以接近

如果您没有完全投入到现有指令中，您可以使用（完全公开：我是作者），它使用与
c3.generate（）
通常使用的对象几乎相同的对象，并从中显示图表


angular.module（'app'，['c3']））
.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.chart={
数据：{
x：‘x’，
栏目：[
['x'、'R1.0'、'R2.0']，
[‘项目1’、1、2]，
[‘项目1（项目2）’、7、8]，
[‘项目二（第1项）’第3、4款]，
['Proj2（项目2）'、11、16]
],
小组：[
[‘项目J1（项目1）’，‘项目J1（项目2）’，
[‘项目J2（项目1）’，‘项目J2（项目2）’，
],
颜色：{
“项目1（项目1）”：“cc0000”，
‘项目1（项目2）’：‘0000cc’，
“项目2（项目1）”：“ff0000”，
“项目2（项目2）”：“#0000ff”，
},
类型：'bar'
},
图例：{
位置：'右'
},
工具提示：{
分组：假，
},
轴线：{
x:{
类型：“类别”
}
}
};
}]);

Awesome@tavnab。图表的演示对我来说很好。我会尽力回复你的。太棒了@tavnab。图表的演示对我来说很好。我会试着给你回电话。