如何在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：圆形条形图

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

您需要基本重写某些c3.js函数，并通过在拐角处提供多个点来提供获取圆角的逻辑。

否则，条形图中的所有条形都是4点的多边形。 解决方案是为酒吧提供更多积分。