堆积条形图条形尺寸与 Y 轴不相关

Question

我正在尝试使用 c3.js 构建堆积条形图。

我遇到的问题是生成的条形图没有珊瑚化到 Y 轴。

这是我目前拥有的：https://codepen.io/anon/pen/dZLMoY?editors=1010

这是代码：

c3.generate({
  bindto:'#chart',
     data: {
        type: 'bar',
        columns: [
           ['Column 1', 2, 10, 22, 34, 9, 60],
          ['Column 2', 6, 15, 43, 36, 45, 75],
          ['Column 3', 10, 20, 79, 39, 50, 97],
          ['Column 4', 12, 27, 87, 76, 55, 150]
        ],
        groups: [
          ['Column 1', 'Column 2', 'Column 3', 'Column 4']
        ],
      },
      bar: {
        width: 15,
      },
      axis: {
        x: {
          show: true
        },
        y: {
          show: true,
          padding: {
            top: 0,
            bottom: 0
          },
          tick: {
            //count: 6
          },
          min: 0,
          max: 150
        }
      },
      grid: {
        x: {
          show: true
        },
        y: {
          show: true
        }
      }
});

如您所见，条形图已生成，但生成不正确。即使提供的值不相等，最后 4 个柱子也都相等。

考虑到 Y 轴的最大值设置为 150，那么第 2、3、4 条不应与第 5 条占用相同的高度

我做错了什么？

Answer 1

您的 axis.y.max 值小于堆叠总和，因此图表在顶部被剪裁。

试试这个：

c3.generate({
     ...
      axis: {
        ...
        y: {
          ...
          min: 0,
          max: 500
        }
      }
   }

或see it in action.

堆积条形图条形尺寸与 Y 轴不相关

Stacked bar chart bars dimension is not coralated to Y axis

c3.js