条形图中的填充顶部

时间:2017-08-30 18:11:10

标签: javascript d3.js

我正在使用c3.js生成图表。我想在标签上的每个条形图上放置一个图像。为了使图像显示良好,我希望图形在顶部有一个空间,这样我就可以在不离开svg的情况下获得图像

https://jsfiddle.net/ao2xojnx/

enter image description here

 var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
        ],
        labels:true,
        type:'bar'
    },
    axis: {

    }
});

1 个答案:

答案 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;
&#13;
&#13;

第二种方式:设置padding.top

&#13;
&#13;
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;
&#13;
&#13;

注意这样一个事实,即在两个方面,你都会在y轴上有额外的刻度。