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.py”来创建每个数据段所在的圆弧，然后通过半径不同的路径绘制图形，半径会根据绘制的数据集而增加(i=1...4)

换句话说: D3小提琴在同一个中心点上绘制多个独立的图形，这样看起来它们就像是相关的。

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

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

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