消除 C3 图表的顶部/底部边距/填充

Question

我有几个图表，想要它们紧密地适应一个div。但是我似乎无法消除顶部/底部的白色空间。理想情况下，图表的顶部和图例的底部将与div紧密贴合。有什么想法吗？我尝试了填充选项，但它们似乎不影响特定的白色空间。 http://jsfiddle.net/264v700x/5/

var chart = c3.generate({
        padding: {
          top: 0,
          bottom: 0
        },
        data: {
          json: [{
            date: '2014-02-02',
            download: 100,
            total: 500
          }],
        keys: {
          x: 'date',
          value: ['why']
        }
    },
    axis: {
        x: {
          type: 'timeseries',
            tick: {
              format: function (x) {
                if (x.getDate() === 1) {
                        return x.toLocaleDateString();
                }
              }
            }
        }
    }
});

欢迎使用CSS/JS hacks！我希望它能适应div而不必指定高度，但如果指定高度是唯一的方法，我可以解决它。任何帮助都将不胜感激。

更新： 我浏览了c3.js，看起来这是在JavaScript中相当静态地添加的。我将不得不重构代码以解决这个问题。

- Spicy Koala

Answer 1

对于其他人的疑问 - 这个空间来自于c3代码中的以下代码行：

$$.margin = config.axis_rotated ? {
    top: $$.getHorizontalAxisHeight('y2') + $$.getCurrentPaddingTop(),
    right: hasArc ? 0 : $$.getCurrentPaddingRight(),
    bottom: $$.getHorizontalAxisHeight('y') + legendHeightForBottom + $$.getCurrentPaddingBottom(),
    left: subchartHeight + (hasArc ? 0 : $$.getCurrentPaddingLeft())
} : {
    top: 0+ $$.getCurrentPaddingTop(), // for top tick text
    right: hasArc ? 0 : $$.getCurrentPaddingRight(),
    bottom: xAxisHeight + subchartHeight + legendHeightForBottom + $$.getCurrentPaddingBottom(),
    left: hasArc ? 0 : $$.getCurrentPaddingLeft()
};

您可以手动调整它，也可以添加代码以允许零边距情况。

- Spicy Koala