chartjs/Chart.js
6 articles
前提知識
- ›JavaScript/TypeScript の基本的な知識
- ›軸・データセット・シリーズなど、チャートの基本概念への理解
- ›npm/pnpm パッケージ管理ツールの使用経験
01
Chart.js の内部構造：アーキテクチャ概要とコードベースツアー
Chart.js リポジトリの構成、モジュール設計、ビルドパイプライン、そして tree-shaking 戦略をわかりやすく解説するガイドです。
02
new Chart() からピクセルまで：チャートのライフサイクルと更新パイプライン
Chart インスタンスのライフサイクルを、コンストラクタから update・render・destroy まで一貫して追いかけます。
03
オプション解決エンジン：デフォルト値・スコープ・Proxy・Scriptable Options の仕組み
JavaScript Proxy を基盤に構築された、Chart.js の多層式オプション解決エンジンを解剖する。スコープチェーンと scriptable options の仕組みを詳しく解説します。
04
設計による拡張性：Registry、プラグインシステム、コンポーネントライフサイクル
Chart.js が Registry、TypedRegistry、そしてライフサイクルフックを備えた PluginService によって拡張性を実現する仕組み。
05
スケール・エレメント・レンダリングパイプライン：データがピクセルになるまで
生の値からScale変換、Elementのジオメトリ、Canvasレンダリングまで、データからピクセルへのパイプラインを追う。
06
チャートに命を吹き込む：アニメーションシステム、イベント処理、インタラクション
Chart.js がアニメーションシステムをどう実装し、DOM イベントを処理し、インタラクティブなホバー状態を管理しているか。