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

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

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("$,")
            }
        },
    }
});


目前的图表外观。

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

最佳答案

我不确定您想要的一切是否可行,但至少您可以接近。对于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

10-05 20:56
查看更多