C3js水平条形图标签切断和尺寸问题

Question

我有一个带有相当长标签的固定大小的水平条形图。

主要问题： 数据最大的标签总是会被截断。

附加问题（很高兴有.. ;）在 C3 中是否可以在条形之间添加边距？

标签被剪掉的例子：

 var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;


data= [
['veryveryveryveryverylongdatalabel01', 439034],
['veryveryveryveryverylongdatalabel02', 413664],
['veryveryveryveryverylongdatalabel03', 351376],
['veryveryveryveryverylongdatalabel04', 349932],
['veryveryveryveryverylongdatalabel05', 316490],
['veryveryveryveryverylongdatalabel06', 315039],
['veryveryveryveryverylongdatalabel07', 285908],
['veryveryveryveryverylongdatalabel08', 285681],
['veryveryveryveryverylongdatalabel09', 285215],
['veryveryveryveryverylongdatalabel10', 203248],
['veryveryveryveryverylongdatalabel11', 200508],
['veryveryveryveryverylongdatalabel12', 195508],
['veryveryveryveryverylongdatalabel13', 195058],
['veryveryveryveryverylongdatalabel14', 193508],
['veryveryveryveryverylongdatalabel15', 185508],
['veryveryveryveryverylongdatalabel16', 180508],
['veryveryveryveryverylongdatalabel17', 177508]
];

var totalDataValue = 0
data.forEach(function(d){
	totalDataValue+=d[1];
});


var chart1 = c3.generate({
  bindto: d3.select('#chart1'),
  data: {
    columns: data,
    type: 'bar',
    labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) + " ["+d3.format(".2%")(v/totalDataValue)+"]"; }}
  },
  bar: {
  	width: { ratio: 1}
  },
  legend: {
    show: false,
  },
  tooltip: {
    show: true,
    format: {
      value: function(value) {
        return d3.format(",.0f")(value);
      }
    }
  },
  zoom: {
    enabled: true
  },
  axis: {
    x: {
      show:false,
      type:'category',
      categories: ['value1']
      },
    y: {
      show:false
    },
    rotated: true
  }
  });

#chart1 {
  width: 600px;
  height: 400px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.js"></script>
<div id="chart1" class "c3">

</div>

这似乎是内部 C3 大小问题。 我在吗？ 有没有办法防止标签被切断？

谢谢

Answer 1

我找到了防止标签被切断的解决方案。 请参阅我的以下帖子： Calculate padding for C3js horizontal bar charts

它基于使用全局图表填充而不是使用 y 轴填充和关闭剪辑路径

Answer 2

您可以设置 Y 轴顶部填充。

axis: {
    y: {
        padding : {
            top: 430
        }
    },
    rotated: true
  }

您还可以根据最大标签的长度计算顶部填充值。

Answer 3

您可以在标签格式函数的末尾使用几个 "\u00A0" 添加一个空格：

data: {
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) 
+ " ["+d3.format(".2%")(v/totalDataValue)+"]"+"\u00A0\u00A0\u00A0\u00A0\u00A0"; }}
},

要在条之间设置一些空间，请添加 bar.space 参数：

bar: {
    space: 0.2
}

下面的代码啜饮：

var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;

data= [
['veryveryveryveryverylongdatalabel01', 439034],
['veryveryveryveryverylongdatalabel02', 413664],
['veryveryveryveryverylongdatalabel03', 351376],
['veryveryveryveryverylongdatalabel04', 349932],
['veryveryveryveryverylongdatalabel05', 316490],
['veryveryveryveryverylongdatalabel06', 315039],
['veryveryveryveryverylongdatalabel07', 285908],
['veryveryveryveryverylongdatalabel08', 285681],
['veryveryveryveryverylongdatalabel09', 285215],
['veryveryveryveryverylongdatalabel10', 203248],
['veryveryveryveryverylongdatalabel11', 200508],
['veryveryveryveryverylongdatalabel12', 195508],
['veryveryveryveryverylongdatalabel13', 195058],
['veryveryveryveryverylongdatalabel14', 193508],
['veryveryveryveryverylongdatalabel15', 185508],
['veryveryveryveryverylongdatalabel16', 180508],
['veryveryveryveryverylongdatalabel17', 177508]
];

var totalDataValue = 0
data.forEach(function(d){
	totalDataValue+=d[1];
});


var chart1 = c3.generate({
  bindto: d3.select('#chart1'),
  data: {
    columns: data,
    type: 'bar',
    labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) + " ["+d3.format(".2%")(v/totalDataValue)+"]"+"\u00A0\u00A0\u00A0\u00A0\u00A0"; }}
  },
 bar: {
    width: { ratio: 1},
    space: 0.2
  },
  legend: {
    show: false,
  },
  tooltip: {
    show: true,
    format: {
      value: function(value) {
        return d3.format(",.0f")(value);
      }
    }
  },
  zoom: {
    enabled: true
  },
  axis: {
    x: {
      show:false,
      type:'category',
      categories: ['value1']
      },
    y: {
      show:false
    },
    rotated: true
  }
  });
  

#chart1 {
  width: 600px;
  height: 400px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.js"></script>

<body>
<br><br>

<div id="chart1" class "c3">