如何在c3.js中设置X轴与Y轴于0点交汇而非Y轴最小值？

当然可以实现！C3.js虽然没有直接命名为“轴偏移”的配置项，但它提供了一个非常实用的axis.y.center属性，专门用来控制X轴与Y轴的交汇位置，刚好能满足你的需求。

核心实现代码 #

你只需要在图表配置的axis.y中添加center: 0，同时保留你设置的Y轴范围（-30℃到50℃），就能让X轴自动对齐到Y轴的0点位置：

var chart = c3.generate({
    data: {
        columns: [
            // 这里替换成你的实际温度数据
            ['温度', 12, -8, 22, -15, 30, 5, -28, 45]
        ]
    },
    axis: {
        y: {
            min: -30,   // 你的预期最小值
            max: 50,    // 你的预期最大值
            center: 0,  // 关键配置：让X轴与Y轴在0点交汇
            label: {
                text: '温度 (℃)',
                position: 'outer-middle'
            }
        },
        x: {
            label: {
                text: '时间/样本序号',
                position: 'outer-center'
            }
        }
    }
});

额外优化建议 #

如果需要确保0刻度清晰显示，可以结合tick.values手动指定Y轴的刻度值，避免自动刻度跳过0点：

axis: {
    y: {
        min: -30,
        max: 50,
        center: 0,
        tick: {
            // 自定义刻度，覆盖自动生成的刻度
            values: [-30, -20, -10, 0, 10, 20, 30, 40, 50]
        }
    }
}

这个配置逻辑很直观：center属性定义了Y轴上的基准点，X轴会自动移动到该点与Y轴交叉，完全符合你想要的展示效果。

内容的提问来源于stack exchange，提问作者flomei