Question

我正在尝试创建编辑饼图的字体和大小，以便可以将其放在电视上。

我试图增加图表的宽度和高度，但不影响标签或值或图例。我用Google搜索了引导程序文档，但找不到关于标签字体大小的任何信息。

<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>

<!-- d3 and c3 charts -->
<script src="js/plugins/d3/d3.min.js"></script>
<script src="js/plugins/c3/c3.min.js"></script> 


<div class="col-lg-6">
  <div class="ibox float-e-margins">
    <div class="ibox-title">
      <h5>Radar Chart Example</h5>
    </div>
    <div class="ibox-content">
      <div>
        <div id="pie" style="Height:2000px;"></div>
      </div>
     </div>
  </div>
</div>

c3.generate({
  bindto: '#pie',
  data: {
    columns: [
      ['data1', 30],
      ['data2', 120]
    ],
    colors: {
      data1: '#1ab394',
      data2: '#BABABA'
    },
    type: 'pie'
  }
 });

当我将浏览器缩放到40时，我希望看到数字 30 和 120 以及标签data1和data2 ％（大约是电视上可以看到的预期尺寸）

Answer 1

您可以inspect elements使用您喜欢的浏览器调试工具来了解如何直接定位元素。这对于第三方库很有用，但这超出了这个问题。

c3使用<svg>标签来显然地生成其图表。因此，据我所知，图表上的大多数信息都是在<text>元素内捕获的。您只是在更改div本身的高度，而不是其中的内容。

快速的答案是将所有<text>选择器作为目标并按如下所示更改字体大小：

c3.generate({
  bindto: '#pie',
  data: {
    columns: [
      ['data1', 30],
      ['data2', 120]
    ],
    colors: {
      data1: '#1ab394',
      data2: '#BABABA'
    },
    type: 'pie'
  }
 });

#pie {
  height: 300px;
}


#pie text
{
  font-size: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- d3 and c3 charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script> 


<div class="col-lg-6">
  <div class="ibox float-e-margins">
    <div class="ibox-title">
      <h5>Radar Chart Example</h5>
    </div>
    <div class="ibox-content">
      <div>
        <div id="pie"></div>
      </div>
     </div>
  </div>
</div>

我想调整c3饼图的标签内部尺寸

1 个答案: