Question

我正在使用c3.js创建量表。我将高度和宽度都设置为75，因为这是我想要的量规的正确尺寸，但是，当生成量规时，容器中总会有多余的空格使我感到困惑。

我真的希望创建的svg的高度为60，以便正确向上移动标签。问题是，当我将图表的高度/宽度设置为60时，由于存在额外的空白，仪表本身的尺寸变得太小了。

我尝试将我所知道的所有内容的填充都设置为0。我在文档中进行了搜索，总是有可能忽略了某些内容。我总是可以尝试做一些棘手的CSS来解决它，但是在我这样做之前，如果可以的话，我想更改配置。

本质上，我希望图表占据我指定的完整大小。我指定不显示的图例似乎仍在占用图表应使用的空间。

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

});

Answer 1

您将很难控制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>

这些多余的空格来自哪里？

1 个答案: