javascript - 填充条形图中的顶部

Question

我正在使用 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: {

    }
});

Answer 1

有两种方法可以做到这一点。两者具有相同的结果，并且都需要硬编码值。

第一种方法:设置y轴最大值:

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>

第二种方式:设置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}
        }
      }
    });

#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>

请注意，无论采用哪种方式，y 轴上都会有额外的刻度。