chartjs-performance-tips
について
このスキルは、Chart.js実装におけるパフォーマンス最適化技術を提供し、大規模データセットでのレンダリング効率に焦点を当てています。主要なヒントには、アニメーションの無効化、データ間引きの実装、キャンバスリソースの管理が含まれます。大量のデータを扱いながら応答性を維持する必要があるデータ可視化を構築する際にご活用ください。
クイックインストール
Claude Code
推奨npx skills add vamseeachanta/workspace-hub -a claude-code/plugin add https://github.com/vamseeachanta/workspace-hubgit clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/chartjs-performance-tipsこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします
GitHub リポジトリ
関連スキル
d3js
その他このスキルは、開発者がD3.jsを使用して完全にカスタマイズされたインタラクティブなデータ可視化を作成できるようにし、SVG要素とデータバインディングを完全に制御できます。標準的なライブラリでは実現できない洗練されたトランジションやインタラクションを備えた独自の複雑なチャートを構築するのに最適です。単純な事前スタイル済みチャートではなく、特注のデータ駆動型可視化が必要な場合にご利用ください。
plotly-with-pandas
その他このスキルは、DataFrameからの効率的なデータ可視化のために、PlotlyとPandasの統合を提供します。CSVデータからの直接プロットを可能にし、数学的可視化のためのNumPy互換性を含みます。インタラクティブなチャートが必要なJupyter環境で表形式データを扱う際にご利用ください。
echarts-with-react
その他このスキルは、EChartsのReactコンポーネントラッパーを提供し、チャートの初期化、オプションの更新、レスポンシブなリサイズ処理を担当します。これは、自動ライフサイクル管理を必要とするReactアプリケーションにEChartsの視覚化を統合する開発者に最適です。コンポーネントには、適切なチャートメンテナンスのためのアンマウント時のクリーンアップとウィンドウリサイズリスナーが含まれています。
chartjs-1-use-responsive-containers
その他このスキルは、Chart.jsのレスポンシブなチャートコンテナと適切なライフサイクル管理に関するベストプラクティスを提供します。アスペクト比を適切に制御したレスポンシブなdivでチャートをラップする方法と、メモリリークを防ぐために再作成前にチャートを破棄する方法を実演します。Webアプリケーションで動的またはリサイズ可能なChart.jsビジュアライゼーションを実装する際にご利用ください。