簡體   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