PRO cell-types progress rating sparkline
セルタイプ ダッシュボード
プログレスバー、星評価、スパークライン、チェックボックス、ハイパーリンク — すべてセル内に描画。
デモの解説
このデモは従業員パフォーマンスのダッシュボードを描画します。各列に異なるセルタイプを使用しており、すべて単一のAPI呼び出しで設定できます。Canvas ベースのエンジンがレンダリングを自動処理します。
- プログレスバー（達成率・P&L%）はインラインバーチャートとして描画 — 双方向バーはマイナス値を赤で表示
- スター評価は 0〜5 スコアを塗りつぶし/空白スターで表示し、クリック操作に対応
- スパークライン（ライン・エリア）は数値配列をセル内のミニグラフとして描画
- チェックボックスは真偽値を切り替え、ハイパーリンクセルはクリック可能なリンクを描画
- スクロール・ウィンドウリサイズ時もすべてのセルタイプが Canvas で 60fps で再描画
主要 API
ws.setCellType(row, col, options) 視覚的なセルタイプ（progress, rating, sparkline-line, sparkline-area, checkbox, hyperlink）をオプション付きで設定
ws.setGridSize(rows, cols) ワークシートの行数・列数を設定
ws.cell(row, col).setValue(value) セルの値を設定。スパークラインの場合は数値配列
ws.cell(row, col).setStyle(style) フォント・色・背景・配置などのスタイルを設定
ws.suspendRender() / ws.resumeRender() 複数の更新をまとめて1回の描画にバッチ処理
ソースコード
TypeScript