如何在c3.js条形图中获得圆角列

Question

我想知道是否有人知道如何围绕c3.js条形图中的列的角落？我在网上发现的黑客似乎不起作用，所以我希望这里的某处可以提供帮助！

谢谢：）

        var mph_chart = c3.generate({
            bindto: '#mph_chart',
            padding: {
                top: 10,
                right: 50,
                bottom: 10,
                left: 190
                    },
            bar: {
                width: 35,
            },
            color: {
                pattern: ['#3366ff']
            },
            data: {
                x: 'x',
                labels:true,
                columns: [
                    ['x', 'Porsche Macan','Porsche Macan S','Porsche Macan S Diesel','Porsche Macan Turbo','Porsche Macan GTS'],
                    ['0-62 mph in seconds', 6.7, 5.4, 6.3, 4.8, 5.2]
                        ],
                type: 'bar',  
                    },
                legend: {
                    show: true
                        },
                axis: {
                    rotated: true,
                        x: {
                            type: 'category',
                            tick: {
                                multiline: false 
                                    } // this needed to load string x value
                            }
                        },
                tooltip: {
                show:false
        },

        bar: {
            width: {
                ration: .7

            },
            spacing: 2
        }
    });

Answer 1

我尝试过简单的条形图，它提供了圆角的条形，如下所示： -

这是jsFiddle： - jsFiddle: Rounded bar charts

.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
    shape-rendering: auto;
 }

你需要基本上覆盖某些c3.js函数，并通过在角落附近提供多个点来提供圆角的逻辑。

否则条形图中的所有条形都是具有4个点的多边形。解决方案是为条形图提供更多分数。