javascript - 摆脱 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 黑客!我希望它适合 div 而不必指定高度，但如果指定高度是唯一的方法，我可以解决它。

感谢任何帮助。

更新: 我浏览了 c3.js，看起来这是在某种程度上静态地添加到 javascript 中的。我将不得不重构代码来解决这个问题。

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()
};

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