知らん間に4になってたよ。
基本形
<!DOCTYPE html>
<html lang="ja">
<head>
︙
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body>
<canvas id="chart"></canvas>
<script>
//内容
</script>
</body>
</html><head>で本体を読み込む。
<body>では任意のところに<canvas>を入れて、最後に<script>でchart.jsの内容を記述する。
<head>にまとめて書きたい病を患っているので、記述箇所をよく間違える。
マニュアル的なもの
日本国内ではv4はそんなに流行ってないっぽくて、本家か海外の記事から情報を得るしかない状態。
基本形は良いんだけど拡張したい場合は英語が読めないと厄介なことになる。
cdn
公式からはCDNJSとjsDelivrが案内されてる。
integrityを入れたい場合はCDNJSのほうがいいですね。jsDelivr本体にSRIの付いてるやつがなかった（2024年1月現在）。
まあ、重くないからdlしてサーバーに上げるのがいいと思う。
導入参考（日本語）
「Chart.js 4系」「Chart.js v4」で検索しても全然出てこないですね。
バージョンについて
chart.jsは拡張機能を別ファイルで作成されてるし、有志が作ってたりする。そうすると本体をバージョンアップさせたら対応するものがありませんでした、ということも出てくる。だから考えなしに最新版を使うと詰んだりする。
慣れてたらどれで何ができるを把握してるわけだけど、普段使わないだとか初めて使うだとかで知見がない場合はChart.jsで何をしたいか予めクリアにしてから導入していくのがいいですね。確認作業がしんどいけど。
そもそも、画像でよくないか
作りっぱなしで良ければ画像のほうがいい。導入やらデザインやらを頑張るよりもillustratorとかでやっちゃった方が早い。
作ったあとに数値の変更とかが確実に発生するならChart.jsでやっとかないとしんどいことになる。
データベースに情報を蓄積してるのをグラフ化したいときもChart.jsならブラウザ上で完結できる。
そういうあれ。使い分けですね。
コメント