代码之家 › 专栏 › 技术社区 › Brandon

这个额外的空白是从哪里来的?

c3.js d3.js javascript

-1

Brandon · 技术社区 · 6 年前

我正在使用 c3.js . 我将高度和宽度都设置为 75 因为这是我想要的合适尺寸的仪表,但是当它们被生成时,容器中总是有多余的空白,这会把我搞得一团糟。

我真的想要 svg 它的创建高度为60,以便正确地向上移动标签。问题是,当我将图表的高度/宽度设置为60时,由于这个额外的空白,仪表本身的大小变得太小了。

我已经尝试将我所知道的所有内容的填充设置为0。我查过文件,总是有可能忽略了一些东西。我可以尝试做一些黑客的CSS来绕过它,但是在我做之前,如果可以的话,我想改变一些配置。

实际上,我希望图表占据我指定的全部大小。我指定不显示的图例似乎仍占用了图表应该使用的空间。

http://jsfiddle.net/kLsox4ya/1/

<div class='row'>
  <div class="col-12" id="chart"></div>
  <p class="col-12 f-small">PERFECT</p>
</div>

var chart = c3.generate({
   bindto: '#chart',
   data: {
       columns: [['data', 0]],
       type: 'gauge'
   },
   gauge: {
       fullCircle: true,
       startingAngle: 2 * Math.PI,
       width: 3,
       expand: false,
       label: {
          show: false
        }
   },
   size: {
       height: 75,
       width: 75
   },
   legend: {
       show: false
   },
   interaction: {
       enabled: false
   }

});

1 回复 | 直到 6 年前

Mark 6 年前

你很难控制住 c3 . 在引擎盖下计算轴、图例等的位置是很困难的。你甚至不用。

我认为你有两个选择:

你自己用直白编码 d3
求助于一个小黑客。例如 here ,我已经手动调整渲染后的高度。

var chart = c3.generate({
        bindto: '#chart',
        data: {
            columns: [['data', 90]],
            type: 'gauge'
        },
        tooltip: {
            show: false
        },
        color: {
            pattern: ['#565656', '#cfd628', '#e8b532', '#28d632'],
                threshold: {
                values: [40, 80, 90, 100]
            }
        },
        gauge: {
            fullCircle: true,
            startingAngle: 2 * Math.PI,
            width: 3,
            label: {
                format: function (value, ratio) {
                    return '';
                },
                extents: function (value) {
                    return '';
                }
            }
        },
        size: {
            height: 75,
            width: 75
        },
        legend: {
            show: false
        },
        interaction: {
            enabled: false
        },
        axis: {
            x: {
                show: false
            },
            y: {
                show: false
            }
        },
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        onrendered: function(){
        	this.svg.attr('height', 55);        	
        }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class='row'>
  <div class="col-12" id="chart"></div>
  <p class="col-12 f-small">PERFECT</p>
</div>