angularjs - 如何使用 C3 创建一个条形图，它不会将所有列分组在同一组中

Question

http://jsfiddle.net/Ln83xd1k/

我创建了一个 C3 条形图，但每列没有多个集合。我只有每个项目的值。看起来它应该是一个很好的经典简单条形图来创建......但我似乎只能创建一个具有 n 个数据点的图表；这些列似乎不应该只有一个值。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30],
            ['data2', 20],
            ['data3', 50],
            ['data4', 3],
            ['data5', 13]
        ],
        type: 'bar'
    }
});

Answer 1

因此，根据您的评论，您可以执行以下操作：

var cols = [
  ['data1', 30],
  ['data2', 20],
  ['data3', 50],
  ['data4', 3],
  ['data5', 13]
];

c3.generate({
  data: {
    columns: cols,
    type: 'bar'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />

您可以更改type: "bar"为type: "pie"，您将得到您提到的饼图。这是条形图等价物。

这让我们回到了开始——这不是你必须开始的吗？

我怀疑你会想要删除 x 轴上的零（可以这样做）并在列之间添加间距？