我想调整 c3 饼图内部标签的大小答案

【问题标题】：I would like to resize inside labels of a c3 pie-chart我想调整 c3 饼图内部标签的大小
【发布时间】：2019-02-16 04:19:35
【问题描述】：

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

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

<!-- 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%（大约预计在电视上可见的尺寸）

【问题讨论】：

hi itsnotmyfault，您的#pie 样式中似乎有错字。您是否尝试过height 而不是Height？你介意创建一个stackoverflow snippet 还是一个工作副本？您的所有链接都是相对的，并且有些链接看起来与手头的问题无关。您说您使用的是 bootstrap 4，但 js/bootstrap.min.js 可能是不同的版本，例如。
我不知道如何获取我正在使用的实际脚本/库的在线链接。
我可以添加一个可以在本地计算机上启动的简单 zip 文件吗？

标签： html css c3.js

【解决方案1】：

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

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>

【讨论】：