javascript - 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 fiddle 实际上创建了三个图表，每个图表都有不同的半径。每个数据集使用“d3.pie”创建每条数据将居住的弧，然后在一条半径不同的路径上绘制图形，该半径根据绘制的数据集而增加(i=1. ..4)

换句话说:D3 fiddle 在同一个中心点上绘制多个单独的图形，因此看起来它们是相关的。

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

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

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