C3.js-在条形图中的X轴和图例之间添加间距

Question

我有一个C3.js条形图，我试图在x轴和图例之间添加一些间距，以避免出现以下视觉上的不适：

我已经尝试执行以下操作，但对图形没有影响：

#stacked_bar_chart_container .c3-axis-x {
    margin-bottom: 5px;
}

我什至尝试用.c3-legend-item做同样的事情，但是用margin-top: 5px;做，但是仍然没有效果。

我还想指出，通过删除#stacked_bar_chart_container（绑定了该图的div容器）也没有任何效果。

Answer 1

您可以使用填充：{bottom：20} 来调整图表和底部图例之间的空间，这将在图表和图例之间增加20px。如果将图例放在右侧，则可以使用填充：{right：20} 。

由于填充会使图表变小，因此您可能需要使用 size：{height：480} 或 size：{width：640}来调整图表的高度或宽度。

我创建了一个小提琴示例http://jsfiddle.net/6jztrbk7/

这是示例JavaScript代码：

var chart = c3.generate({
   data: {
      columns: [
          ['data1', -30, 200, 200, 400, -150, 250],
          ['data2', 130, 100, -100, 200, -150, 50],
          ['data3', -230, 200, 200, -300, 250, 250],
      type: 'bar',
      groups: [
          ['data1', 'data2']
      ]
   },
   grid: {
      y: {
          lines: [{value:0}]
      }
   },
   legend: {
      position: 'bottom'
   },
   size: {
      height: 300 //adjust chart height
   },
   padding: {
      bottom: 20 //adjust chart padding bottom
   }
});