Question

我有一些图表，我试图将其贴近div。我似乎无法让顶部/底部的空白区域消失。理想情况下，图形的顶部和底部图例可以贴合div。有任何想法吗？我已尝试过填充选项，但它们似乎不会影响特定的空白区域。

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

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

摆脱C3图表上的上/下边距/填充

1 个答案: