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

Question

我可以放大c3js图表的字体，比如轴标签、数据标签或类别吗？我有兴趣将通用字体设置为更大的字体。

我搜索了文档，但找不到任何与 "font" 相关的内容。

Answer 1

C3 在生成时为每个元素提供一些 classes。因此，您可以通过使用 classes 和 CSS.

来更改元素的样式

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

Web 检查器将有助于检查 classes。

在您的案例中，标签是：

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

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

Answer 2

我还需要四处搜索并阅读 c3.css 文件，以便更好地了解如何更改默认外观。

我的头顶是一些类您可能想要更改布局的内容，只需确保在 c3.css 之后包含您自己的 CSS 文件以覆盖它.

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

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

C3.js 图表：CodePen

Answer 3

使用下面两个类。

.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

Answer 4

就放

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

相应地更改字体大小

Answer 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 克隆 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")

Answer 6

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

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

导出图表为图片比写样式更高效。谢谢

Answer 7

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

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

c3js: Is there a way to change font size?

c3.js