javascript - c3.js 图表上的数据图标签被 chop

Question

我在 c3.js 折线图上画了一些线，但最左边点的数据标签被截掉了:

我已经尝试向图表添加填充，但这只会向整个图表添加填充。我需要的是一些方法来仅向条形图刻度添加某种填充。

我考虑过的事情:

我考虑过使用“transform”属性:

.c3-texts .c3-text text {
  transform: translate(10px, 0);
}

但是将所有数据标签的位置向右移动最终会导致图形右侧的数据标签被 chop 。

这是一个标签被 chop 的简单示例:

fiddle

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250]
        ],

        labels: {
         format: function(x){
             return "Test Label"
         }
        }
    }
});

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

@ksav 为我指明了正确的方向。我记得以前试过这个，但愚蠢的是，我没有想到放十进制数。我曾尝试输入值 1，但填充过多，但执行以下操作非常有效:

axis: {
  x: {
    padding: {
      left: 0,
      right: 0,
    }
  }
}