c3.js 中的堆叠圆环图

Question

我想从 c3.js 定制一个圆环图，让它有 2 层。

这是基于 c3.js 的非常基本的开箱即用圆环图的代码。

var chart = c3.generate({
    data: {
        columns: [
            ['bulls', 30],
            ['lakers', 50],
        ],
        type : 'donut'
    },
}); 

这是与我想要实现的目标相似的图像：

我确实找到了这个fiddle，但我不确定如何在 c3.js 中实现它。 这是我的fiddle的链接。

Answer 1

D3 小提琴实际上是在创建三个图表，每个图表都有不同的半径。每个数据集使用“d3.pie”创建每条数据将占据的弧线，然后在半径不同的路径上绘制图形，并根据正在绘制的数据集（i = 1. ..4)

换一种说法：D3 fiddle 在同一个中心点绘制多个单独的图形，所以看起来它们是相关的。

我没有直接使用 C3.js，但是您可以通过使用相同的中心点为每个嵌套图表创建两个具有不同半径和宽度的图表来完成类似的操作。 （基本上把一个放在另一个里面）原点坐标应该是相同的，只要百分比匹配，它们最终应该看起来像你的截图图像。

不确定是否有设置中心坐标的方法，但您应该能够将 DIV 绝对定位在可以工作的页面上的同一位置。

也就是说，我可能会建议从 C3.js 移开，而是使用现有的 D3 fiddle 和库，然后根据需要绘制标签/添加交互性，因为它似乎更简单一些，并且可以提供更好的自定义机会您将来的用例。您可能还想考虑使用像 NVD3.js 这样的库，它提供对核心 d3 方法及其图表的访问，以便您可以从示例甜甜圈和 D3 Fiddle 中复制代码。