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

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

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

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

这条线可能有点细，但您可以通过更改它来使它更粗 css。我认为是 c3-ygrid-line。要获取更多信息，您可以随时使用 the reference

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

How to display negative values below the x-axis in C3.js

javascript

charts

c3.js