c3.js中堆积的甜甜圈图表 [英] Stacked Donut Chart in c3.js

问题描述

我想从c3.js自定义圆环图，所以它有2层。

I would like to customize a donut chart from c3.js so it that has 2 layers.

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

This is the code for the very basic out of box c3.js based donut chart.

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

这是一张类似于我想要达到的图像：

This is an image of something similar to what i want to achieve:

我确实发现了这个小提琴但我不确定如何在c3.js中实现它。
这是我的小提琴的链接。

I did find this fiddle but I am not sure on how to implement it in c3.js. Here is a link to my fiddle.

推荐答案

D3小提琴实际上是创建三个图表，每个图表具有不同的半径。每个数据集使用d3.pie来创建每个数据将驻留的弧，然后在半径不同的路径上绘制图形，并根据绘制的数据集（i = 1）增加。 ..4）

The D3 fiddle is actually creating three charts, each with a different radius. Each dataset uses "d3.pie" to create the arc that each piece of data will inhabit, and then the graph is being drawn across a path with a radius that is different and increases based on which dataset is being plotted (i=1...4)

换句话说：D3小提琴在同一个中心点绘制多个单独的图形，所以它看起来就像是相关的。

Put another way: The D3 fiddle is drawing multiple separate graphs on the same center point so it just looks like they're related.

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

I haven't worked directly with C3.js, but you could accomplish something similar to this by creating two charts using the same center point with different radii and widths for each nested chart. (Basically putting one inside the other) The origin coordinate should be the same so as long as the percentages match up they should end up looking like your screenshot image.

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

Unsure if there is a method to set the center coordinate but you should be able to absolutely position your DIVs on the same spot on the page that can work.

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

That said, I might recommend moving away from C3.js and instead using the existing D3 fiddle and library and then draw labels / add interactivity as needed as it seems to be a bit more simple and will allow for better customization opportunities for your use case in the future. You may also want to consider using a library like NVD3.js which provides access to the core d3 methods alongside their charts so you can crib code from both example donuts and the D3 Fiddle.

这篇关于c3.js中堆积的甜甜圈图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！