国際化
どちらのレンダリングエンジンもホスト OS / コンテナが提供する フォントを使います(既定の skia エンジンはシステムフォント、 browser エンジンは従来のフォントスタック)。Docker イメージには Noto Sans CJK を同梱しており、両エンジンで日本語・中国語・韓国語が 豆腐化せず描画されます。
日本語ラベル
動く仕組み
- Docker の場合:
Dockerfileがfonts-noto-cjkをインストール。skiaエンジン(skia-canvas)もbrowserエンジン(Chromium)も、 CJK グリフのフォールバックとして自動的に拾います。 - ホスト (Docker なし) の場合: OS の設定次第。macOS や最近の Windows なら CJK は問題なく動きます。ミニマルな Linux では
apt install fonts-noto-cjk等で追加が必要。
既定以外のロケールの疎通確認
最速のスモークテスト:
# 日本語
echo '{"type":"bar","data":{"labels":["東京"],"datasets":[{"data":[1]}]}}' \
| chartjs2img render -o /tmp/ja.png
# 中国語
echo '{"type":"bar","data":{"labels":["北京","上海"],"datasets":[{"data":[1,2]}]}}' \
| chartjs2img render -o /tmp/zh.png
# 韓国語
echo '{"type":"bar","data":{"labels":["서울","부산"],"datasets":[{"data":[1,2]}]}}' \
| chartjs2img render -o /tmp/ko.pngどれか豆腐化したら、ホストのフォント設定を確認(あるいは Docker イメージを使用)。
右から左のスクリプト
RTL(アラビア語、ヘブライ語)も正しく描画されます — Chart.js と レンダリングエンジン(skia は Skia、browser は Chromium)が テキストレイアウトをネイティブに処理。句読点や bidi isolate も期待通り。RTL 専用フォントパックは同梱していませんが、 Noto Sans のグリフカバレッジで大抵の環境でそのまま通ります。
特定フォントの強制
フォントファミリは3通りで指定できます(Chart.js の options.font.family が全テキスト要素にカスケードします):
- CLI:
--font-family "<名前>" - HTTP: リクエストボディの
"fontFamily": "<名前>" - ライブラリ:
fontFamilyレンダオプション
CLI / HTTP では、ホストにインストール済みのフォント名を指定する 必要があります(既定の skia エンジンはシステムフォントスタック、 browser エンジンは Chromium のフォントスタックを読みます)。
自前フォントの持ち込み(ライブラリ・システム導入不要)
TypeScript ライブラリからは、フォントパッケージ(例: @fontsource/*)を登録し、skia エンジンで システムフォント未インストールでも描画できます。最小コンテナで CJK・多言語出力を確実にする最も簡単な方法です:
import { renderChart, registerFonts } from 'chartjs2img'
import { createRequire } from 'node:module'
const require = createRequire(import.meta.url)
// bun add @fontsource/noto-sans-jp
await registerFonts({
'Noto Sans JP': [
require.resolve('@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-400-normal.woff2'),
],
})
await renderChart({ chart, fontFamily: 'Noto Sans JP' })複数の script subset を1つの family 名にまとめれば合成カバレッジに なります。詳細は ライブラリ API → カスタムフォント を参照。(登録はライブラリ専用。CLI / HTTP の fontFamily は インストール済みフォントの選択のみ。)
