我正在使用c3.js生成图表。我想在标签上的每个条形图上放置一个图像。为了使图像显示良好,我希望图形在顶部有一个空间,这样我就可以在不离开svg的情况下获得图像
https://jsfiddle.net/ao2xojnx/
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels:true,
type:'bar'
},
axis: {
}
});
答案 0 :(得分:1)
有两种方法可以做到这一点。两者都有相同的结果,都需要硬编码值。
第一种方式:设置y axis
最大值:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
max: 700
}
}
});

#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
&#13;
第二种方式:设置padding.top
:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
padding: {top:200, bottom:0}
}
}
});
&#13;
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
&#13;
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
&#13;
注意这样一个事实,即在两个方面,你都会在y轴上有额外的刻度。