摆脱 C3 图表上的顶部/底部边距/填充答案

【问题标题】：Get rid of top/bottom margin/padding on C3 Chart摆脱 C3 图表上的顶部/底部边距/填充
【发布时间】：2016-02-09 22:46:09
【问题描述】：

我有一些图表，我正试图将它们紧密地放入一个 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 hack！我希望它适合 div 而不必指定高度，但如果指定高度是唯一的方法，我可以解决它。

感谢任何帮助。

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

【问题讨论】：

标签： javascript css c3.js

【解决方案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()
};

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

【讨论】：