c3js：有没有办法改变字体大小？答案

【问题标题】：c3js: Is there a way to change font size?c3js：有没有办法改变字体大小？
【发布时间】：2015-02-11 14:50:19
【问题描述】：

我可以放大 c3js 图表的字体，例如在轴标签、数据标签或类别中吗？我有兴趣将一般大小写字体设置为更大的字体。

我搜索了文档，找不到任何与“字体”相关的内容。

【问题讨论】：

建议的解决方案对您有用吗？

标签： c3.js

【解决方案1】：

使用以下两个类。

.c3-axis-y text 
{
  font-size: 15px; //change the size of the fonts
}

.c3-axis-x text 
{
  font-size: 15px; //change the size of the fonts
}

对于右侧的 y 轴，使用 - .c3-axis-y2 text

【讨论】：

【解决方案2】：

C3 在生成时为每个元素提供一些类。因此，您可以通过将这些类与 CSS 结合使用来更改元素的样式。

示例： 1.线型线条有c3-line-[id]类，所以这个类可以用来定义css中的样式。

Web Inspector 对检查类很有用。

在您的情况下，标签是：

c3-legend-item-event
tick
....

来自 C3js 文档：http://c3js.org/gettingstarted.html

【讨论】：

我尝试使用 CSS 进行样式设置，但是当我将 font-size 增加到超过一定限制时，由于其父容器的宽度有限，文本开始隐藏。是否有更灵活的方法来自定义轴标签或图例的字体大小？另外，有没有办法在标签中添加换行符？我想在某个单词后打破标签。任何形式的帮助都将不胜感激。

【解决方案3】：

我也不得不四处搜索并阅读 c3.css 文件以更好地了解如何更改默认外观。

我想到了一些你可能想要改变布局的类，只要确保在 c3.css 之后包含你自己的 CSS 文件来覆盖它。

.c3-legend-item
.c3-tooltip th
.c3-tooltip td

下面的 CodePen 包含根据自己的喜好自定义 C3 图表所需的大部分其他 CSS 类。我是条形图/折线图的混合体，但在饼图和圆环图上进行了测试，因此类是相同的。

C3.js 图表：CodePen

【讨论】：

【解决方案4】：

随便放

table.c3-tooltip{
font-size:150px;
} here

相应地更改字体大小

【讨论】：

【解决方案5】：

您还提到了数据标签的大小（不仅是轴标签），例如在条形图顶部显示结果的文本的字体大小。

这在 c3 库中称为“c3-chart-text”。 https://c3js.org/reference.html#class-c3-chart-text

我将此添加到 css 文件并解决了：

.c3-chart-text text 
{
    font-size: 18px; //change the size of the fonts
}

如果您想自动执行此行为，那么：

克隆 git：repo git clone https://github.com/mrjoh3/c3.git
将格式“.c3-chart-text text{font-size: 16px}”添加到 css 文件中：

..c3/inst/htmlwidgets/lib/c3-0.6.1/c3.min.css ..c3/inst/htmlwidgets/lib/c3-0.6.7/c3.min.css
然后从这个文件夹重新安装包：install.packages("../c3", repos = NULL, type = "source")

【讨论】：

【解决方案6】：

最初使用 jquery 选择器轻松带入所有文本标签

$('text').each(function(){
 $(this).attr("font-size", "14"); //
 $(this).attr("font-weight", "bold");
 $(this).attr("font-family", "Arial, Helvetica, sans-serif");
});

当您要将图表导出为图像时，它比编写样式更有效。谢谢

【讨论】：

【解决方案7】：

我已将此代码用于仪表图并且它有效。 #graphId svg text { font: bold 15px Arial !important; }

【讨论】：