css - 无论图表内容如何，​​都使 y 轴固定

Question

我正在使用 C3js 绘制此图表

图表 1。

在y轴上，我有

  y:
    tick:
      values: [
        0
        0.05
        0.10
      ]
      format: d3.format('%')

当第一个柱的值小于 10% 时，y 轴上的 10% 标记将不会显示，:( 。我意识到图表的内容决定了 y 轴的高度。

当我的值超过 10% 时，y 轴上会显示标记

图表 2。

这不是我想要的行为，我想让 y 轴固定并独立于条形值。我试过从顶部填充，它看起来真的很难看，我也试过给它一个固定的高度，但也没有用。 y 轴似乎取决于条形的值。

我的问题是如何使 y 轴保持在图表 2 的固定高度。和 使 10% 标记保持在原位，而不管条的值如何？

P.S 条形可以 overflow hidden ，但我希望 y 轴完好无损。谢谢。

Answer 1

您可以使用 axis.y.max 设置 y 轴的最大值，使用 axis.y.tick.values 设置您想要的刻度值在 y 轴上显示。

axis: {
    y: {
        max: 0.1,
        tick: {
            values: [0, 0.05, 0.1],
            ...

---

fiddle - http://jsfiddle.net/q5z3j2yy/