在 c3.js 图表上截断的数据图标签答案

【问题标题】：Data graph labels cut off on c3.js chart在 c3.js 图表上截断的数据图标签
【发布时间】：2016-07-28 16:41:03
【问题描述】：

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

我尝试向图表添加填充，但这只是为整个图表添加填充。我需要的是某种方式来为条形图刻度添加某种填充。

我考虑过的事情：

我考虑过使用“转换”属性：

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

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

这是一个标签被切断的简单示例：

fiddle

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

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

任何帮助将不胜感激。谢谢！

【问题讨论】：

你能贴出你图表的代码吗？
@ksav 当然，我会用一个例子更新帖子。
看看这里：c3js.org/reference.html#axis-x-padding

标签： javascript css d3.js c3.js linegraph

【解决方案1】：

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

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

【讨论】：