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

您可以使用 padding: {bottom: 20} 调整图表和底部图例之间的间距，这将在图表和图例之间增加 20 像素。如果将图例放在右侧，则可以使用 padding: {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
   }
});