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轴相关联

1 个答案: