syncfusion-aspnetcore-lineargauge

Name: syncfusion-aspnetcore-lineargauge
Author: syncfusion

github.com/syncfusionデザイン・UI053 回インストール2 週間前に更新

リポジトリ

syncfusion-aspnetcore-lineargauge について

ASP.NET Core プロジェクトで数値ゲージを実装する開発者向けの Syncfusion Linear Gauge ガイドです。ポインター、範囲、注釈、操作機能を扱い、温度や進捗、監視指標の表示に役立ちます。

主な機能

01Marker・Bar ポインター
02値の範囲を色分け
03テキスト・画像・HTML 注釈
04ドラッグ・ツールチップ・イベント
05ポインターのアニメーションと外観設定
06印刷と画像エクスポート

活用シーン

01温度や速度を表示
02進捗インジケーターを作成
03ダッシュボードで実績値と目標値を比較
04リアルタイムに変化する値を監視

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-lineargauge

インストール後、Claude Code で/syncfusion-aspnetcore-lineargaugeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

advanced-features.md

annotations.md

api-reference.md

appearance-and-styling.md

examples-and-use-cases.md

gauge-dimensions.md

getting-started.md

interactions-and-events.md

pointers-and-indicators.md

ranges-and-values.md

詳細

Syncfusion Linear Gauge の実装

このスキルを使用する場面

次のような場合にこのスキルを使用します。

数値を線形ゲージ形式で表示する場合（温度、速度、パフォーマンス指標など）
ドラッグ可能なポインターを備えたインタラクティブなゲージを作成する場合
線形スケール上の範囲やしきい値を可視化する場合
ゲージに注釈やカスタム要素を追加する場合
リアルタイムのデータ更新に対応したダッシュボードゲージを実装する場合
温度計スタイルや進捗インジケーターのコンポーネントを構築する場合

コンポーネントの概要

Linear Gauge コンポーネントは、軸の数値を線形形式で可視化します。すべての要素は Scalable Vector Graphics（SVG）を使用して描画されます。主な機能は次のとおりです。

複数のポインター - Marker と Bar のポインタータイプに対応
範囲のハイライト - 値のゾーンを強調表示する色範囲を定義
注釈 - ゲージ上の任意の場所にテキスト、画像、HTML 要素を追加
インタラクティブ機能 - ポインターのドラッグ＆ドロップ、ツールチップ、イベント
アニメーション - 読み込み時や値の変更時に滑らかなポインターアニメーションを実行
カスタマイズ - 色、テーマ、枠線、スケール、コンテナータイプ（Normal、RoundedRectangle、Thermometer）
アクセシビリティ - スクリーンリーダーに対応し、WCAG 2.2 に準拠
印刷とエクスポート - ゲージ画像の印刷とエクスポート

クイックスタートの例

Linear Gauge の最小限の実装例を示します。


<ejs-lineargauge id="linear" title="Temperature Gauge" orientation="Horizontal">
    <e-lineargauge-axes>
        <e-lineargauge-axis minimum="0" maximum="200">
            <e-lineargauge-ranges>
                <e-lineargauge-range start="0" end="50" color="blue"></e-lineargauge-range>
                <e-lineargauge-range start="50" end="150" color="green"></e-lineargauge-range>
                <e-lineargauge-range start="150" end="200" color="red"></e-lineargauge-range>
            </e-lineargauge-ranges>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer value="75" type="Bar"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>