web-dev-qa-db-ja.com

c3js：フォントサイズを変更する方法はありますか？

軸ラベル、データラベル、カテゴリなど、c3jsグラフのフォントを拡大できますか？一般的な大文字のフォントをより大きなフォントに設定することに興味があります。

ドキュメントを検索しましたが、「フォント」に関連するものは何も見つかりませんでした。

c3.js
10
Kludge

C3は、生成時に要素ごとにいくつかのクラスを提供します。したがって、CSSでこれらのクラスを使用することにより、要素のスタイルを変更できます。

例：1。線のスタイル線にはc3-line-[id]クラスがあるため、このクラスを使用してcssでスタイルを定義できます。

Webインスペクターは、クラスをチェックするのに役立ちます。

あなたの場合、ラベルは次のとおりです。

  • c3-legend-item-event
  • tick
  • ..。

C3jsドキュメントから： http://c3js.org/gettingstarted.html

7
aberna

次の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を使用します。

5
Janmejay Shikhare

デフォルトの外観を変更する方法をよく理解するために、私も少し検索してc3.cssファイルを読む必要がありました。

頭のてっぺんから、レイアウトを変更したいクラスがいくつかあります。c3.cssの後に独自のCSSファイルを含めてオーバーライドしてください。

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

以下のCodePenには、C3チャートを好みに合わせてカスタマイズするために必要な他のCSSクラスのほとんどが含まれています。私は棒グラフと折れ線グラフのハイブリッドですが、円グラフとドーナツグラフでテストされているため、クラスは同じです。

C3.jsチャート： CodePen

1
Gothburz

置くだけ

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

それに応じてフォントサイズを変更します

0
Apurv Kamalapuri

データラベルのサイズ（軸ラベルだけでなく）についても言及したので、たとえば棒グラフの上部に結果を表示するテキストのフォントサイズ。

これは、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
}

この動作を自動化したい場合は、次のようにします。

  1. gitのクローンを作成します：repo git clone https://github.com/mrjoh3/c3.git

  2. 「.c3-chart-texttext {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

  3. 次に、このフォルダーからパッケージを再インストールします：install.packages（ "../ c3"、repos = NULL、type = "source"）

0
yImI