Question

这就是我希望它看起来像x轴以下的负值和圆括号中的负值。

C3.js代码

    var chart = c3.generate({
    bindto : "#totalDollarFlow",
    size : {
        height : 400,
        width : 700
    },
    title : {
        text : data.title
    },
    data : {
        x : labels,
        columns : data.columns,
        axes : {
            data1 : 'y',
        },
        type : 'bar',
        types : {
            data1 : 'line',
        },
        names : {
        },
        colors : {
            data1 : '#2ca02c',

        },
        selection : {
            enabled : true,
            draggable : false,
            multiple : true,
            grouped : true
        }
    },
    subchart : {
        show : false
    },
    point : {
        show : false
    },

    zoom : {
        enabled : true,
        rescale : true
    },
    grid : {
        y : {
            show : true
        }
    },
    regions : [ {
        axis : 'y',
        start : 186,
        end : 187,
        class : 'regionY'
    } ],
    axis : {
        x : {
            type : 'category',
            tick : {
                rotate : 90,
                centered : true,
                fit : true,
                multiline : false,
                culling : {
                    max : 60
                }
            },
        },
        y : {
            label : {
                text : '$s Millions',
                position : 'outer-middle'
            },
            tick : {
                format : d3.format("$,")
            }
        },
    }
});

目前图表的样子如何。

Answer 1

我不确定你想要的一切是否可行，但至少你可以接近它。对于您的y轴，您可以使用以下格式：

y : {
            label : {
                text : '$s Millions',
                position : 'outer-middle'
            },
            tick : {
               format: function (d) { 
                    const realNumber = d*1000000;    
                    return realNumber.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                }
            }
        }

要使线条为0，您可以在位置0为y轴定义网格线。您也可以在此设置文本，但只能使用一个文本来描述此线的用途，而不是像刻度线一样。我认为这比在你的图表中浮动时间戳更好。

grid : {
        y : {
            show : true,
            lines: [
                {value: 0},
            ]
        }
    }

这条线可能有点薄，但是当你改变它的css时你可以让它更厚。我认为这是c3-ygrid-line。要获得更多信息，您可以随时使用the reference

如何在C3.js中的x轴下方显示负值

1 个答案: