C3js 水平条形图标签切断和大小问题
C3js horizontal bar chart labels cut off and sizing issue
我有一个固定大小的水平条形图,带有相当长的标签。
主要问题:
数据最大的标签总是被截断。
其他问题(很高兴有.. ;)在 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 大小调整问题。
我在那里吗?
有什么方法可以防止标签被切断?
谢谢
您可以在标签格式函数的末尾使用几个 "\u00A0" 添加一个空 space:
data: {
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v)
+ " ["+d3.format(".2%")(v/totalDataValue)+"]"+"\u00A0\u00A0\u00A0\u00A0\u00A0"; }}
},
要在条形之间设置一些 space,请添加 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">
您可以设置 Y 轴顶部填充。
axis: {
y: {
padding : {
top: 430
}
},
rotated: true
}
您还可以根据最大标签的长度计算顶部填充值。
我找到了防止标签被截断的解决方案。
请参阅我的以下内容 post:
它基于使用全局图表填充而不是使用 y 轴填充和关闭 clip-path
我有一个固定大小的水平条形图,带有相当长的标签。
主要问题: 数据最大的标签总是被截断。
其他问题(很高兴有.. ;)在 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 大小调整问题。 我在那里吗? 有什么方法可以防止标签被切断?
谢谢
您可以在标签格式函数的末尾使用几个 "\u00A0" 添加一个空 space:
data: {
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v)
+ " ["+d3.format(".2%")(v/totalDataValue)+"]"+"\u00A0\u00A0\u00A0\u00A0\u00A0"; }}
},
要在条形之间设置一些 space,请添加 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">
您可以设置 Y 轴顶部填充。
axis: {
y: {
padding : {
top: 430
}
},
rotated: true
}
您还可以根据最大标签的长度计算顶部填充值。
我找到了防止标签被截断的解决方案。
请参阅我的以下内容 post:
它基于使用全局图表填充而不是使用 y 轴填充和关闭 clip-path