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

mawds 发表于 Dev

花胶

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

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

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

我什至尝试用相同的方法来做同样的事情，.c3-legend-item但是用amargin-top: 5px;代替，但是它仍然没有效果。

我还要指出的是，删除#stacked_bar_chart_container（div绑定此图的容器）仍然没有任何效果。

鞋匠

您可以通过使用填充：{bottom：20}来调整图表和底部图例之间的空间，这将在图表和图例之间添加额外的20px。如果将图例放在右侧，则可以使用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
   }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。