如何在 c3.js 条形图中获取四舍五入的列答案

【问题标题】：How to get rounded columns in c3.js bar chart如何在 c3.js 条形图中获取四舍五入的列
【发布时间】：2015-12-26 22:21:35
【问题描述】：

我想知道是否有人知道如何在 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
        }
    });

【问题讨论】：

标签： javascript c3.js

【解决方案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 个点的多边形。解决办法是给bar提供更多的点数。

【讨论】：