如何在c3.js条形图中获取四舍五入的列 [英] How to get rounded columns in c3.js bar chart

问题描述

我想知道是否有人知道如何绕过c3.js条形图中的列的角？我在网上找到的骇客似乎没有用，所以我希望这里能有所帮助！

I was wondering if anyone know how to round the corners of the columns in a c3.js bar chart? The hacks I have found online, doesn't seem to work, so I hope somewhere here can help!

谢谢：）

        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
        }
    });

推荐答案

我已尝试将其用于简单的条形图，该条形图提供了带有圆角的条形如下所示：-

I have tried it for simple bar charts, which provides bars with rounded corner as shown below:-

这是jsFiddle：- jsFiddle：圆形条形图

Here is the 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函数并提供四舍五入的逻辑

You need to basically override certain c3.js functions and provide logic for getting rounded corner by providing multiple points near the corner.

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

Otherwise all bars in a bar chart are polygons with 4 points. Solution is to provide bars with more points.

这篇关于如何在c3.js条形图中获取四舍五入的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！