C3.js

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} 调整图表和底部图例之间的 space，这将在图表和图例之间增加额外的 20px。如果将图例放在右侧，可以使用 padding: {right: 20}.

因为填充会使图表变小，您可能需要使用 size: {height: 480} 或 来调整图表的高度或宽度尺寸：{width: 640}，分别为.

我创建了一个 fiddle 示例 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
   }
});

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

C3.js - Adding Spacing between the X-axis and Legend in Bar Graphs

javascript

css