为轴创建偏移量 - X 和 Y 应该在 0 处相遇，而不是 Y 轴最小值

Question

我正在使用 c3.js 来显示温度值，我希望值的范围是 -30 到 +50 度。

到目前为止效果很好，但我对图形表示不满意。

我想让我的 X 轴在 0 而不是 -30 处与 Y 轴相交。 c3.js 这可能吗？我已经看过手册和示例，但我没有找到任何关于以这种方式偏移轴的信息。

Answer 1

您可以隐藏默认轴 (1) 并在零 (2) 处添加自定义线。

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 20, -10, 40, 15, -25]
        ]
    },
    axis: {
        x: {
            show: false // (1)
        },
        y: {
            max: 50,
            min: -30,
            // center: 0,
        }
    },
    grid: {
        y: {
            lines: [{ value: 0, text: 'zero' }] // (2)
        },
    },
});

为轴创建偏移量 - X 和 Y 应该在 0 处相遇，而不是 Y 轴最小值

Create offset for axis - X and Y should meet at 0, not Y-axis min value

c3.js