Question

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

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

Answer 1

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

实施例： 1.线条风格这些行有c3-line-[id]类，因此该类可用于在css中定义样式。

Web Inspector对于检查类很有用。

在您的情况下，标签是：

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

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

Answer 2

使用以下两个类。

.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 3

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

这里有一些您可能想要更改布局的类，只需确保在c3.css之后包含您自己的CSS文件以覆盖它。

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

下面的CodePen包含您需要根据自己的喜好自定义C3图表所需的大多数其他CSS类。我是一个条形图/折线图混合，但在饼图和圆环图上进行了测试，所以类别是相同的。

C3.js图表：CodePen

Answer 4

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

Answer 5

刚刚放

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

相应地更改字体大小

Answer 6

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

这在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：回购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，类型=“ source”）

Answer 7

首先轻松地使用jquery选择器带来所有文本标签

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

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

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

7 个答案: