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小提琴在同一个中心点绘制多个单独的图形，所以看起来它们只是相关。

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

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

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