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

Question

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

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

Answer 1

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

示例：1.线型这些行具有c3-line-[id]类，因此可以使用该类在css中定义样式。

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

在您的情况下，标签为：

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

就放

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

相应地更改字体大小

Answer 5

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

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

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