繁体   English   中英

如何在c3.js中获得分组条形图(堆栈图)的圆角

[英]How to get rounded corner for grouped bar chart(stack chart) in c3.js

请帮助我在c3.js中为堆叠图表(分组条形图)添加圆角。

我在这里找到了类似的方法如何在c3.js条形图中获取四舍五入的列,但这是正常的条形图。 它不适用于堆积图。 我对d3.js不熟悉。 谢谢 :)

这是我的代码。 在此处输入图片说明

    var chart = c3.generate({
        bindto: "#id",//element
        padding: {
            left: 50,
            right: 50,
            top: 20,
            bottom: 20
        },
        data: {
            // x : 'x',
            columns: [//Data Arry
                ['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
                ['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
                ['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],

            ],
            type: 'bar',
            groups: [
                ['data1', 'data2', 'data3']//grouping data to get stacked chart
            ],

        },
        bar: {
            width: {
                ratio: .6 //setting width of bar
            },
            spacing: 2//setting space between bars
        },

        grid: {
            y: {//grid lines
                show: true,
                color:'red'
            }
        },


        axis: {

            x: {
                type: 'category',
                tick: {
                    rotate: -90,
                    multiline: false,
                    format: "%b"                   //format: "%e %b %y"
                },

                height: 50,
                categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
            },
            y2: {
                show: false
            },
            y: {
                tick: {
                    format: d3.format("s")//format y axis
                }
            }

        },
        color: {
            pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
        }
    });

将数据顺序设置为空

 data: {

                columns: [
                    ['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
                    ['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
                    ['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],

                ],
                type: 'bar',
                groups: [
                    ['data1', 'data2', 'data3']
                ],
                order: null

            },

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM