ダッシュボードに動的なゲージを追加したい

今回は、コピペで使えるスピードメーターゲージを作成したので、その実装方法とカスタマイズ方法をご紹介します。

完成イメージ

このゲージはSVGで作成されており、スライダーを動かすことでリアルタイムに数値や目標値を変更することができます。

マテリアルデザインに準拠したシンプルでフラットなデザインなので、業務用のダッシュボードにも使いやすいです。

以下はSVG形式のコードです。画像コントロールに貼り付けることでそのまま利用が可能です。コピペ用に value と targetValue は固定の数値にしていますが、この部分をスライダーなどのコントロールの値に変更することで、スライダーで動かすことが可能です。

With(
    {
        // === 基本設定 ===
        value: 50,
        targetValue: 75,                // 目標値（0-100で設定）
        
        // === 表示設定 ===
        showText: true,                 // true: 中央のテキスト表示, false: 非表示
        unitText: "%",                  // 単位（"%", "件", "人", "個" など）
        
        // === マテリアルデザインカラー（紫ベース） ===
        // Primary Color (メインのゲージ色)
        colorPrimary: "#7B1FA2",        // Purple 700
        colorPrimaryLight: "#9C27B0",   // Purple 600
        
        // Target Line Color
        colorTarget: "#F57C00",         // Orange 700（目標値の色）
        
        // Background Colors
        colorBackground: "#FFFFFF",      // 背景
        colorTrack: "#E0E0E0",          // トラック（未達成部分）
        
        // Text Colors
        colorTextPrimary: "#4A148C",    // Purple 900（濃い紫）
        colorTextSecondary: "#9E9E9E",  // 薄いテキスト
        
        // === サイズ設定 ===
        strokeWidth: 16                 // ゲージの太さ
    },
    "data:image/svg+xml," & EncodeUrl($"
    <svg viewBox='0 0 220 140' xmlns='http://www.w3.org/2000/svg' style='background-color: {colorBackground};'>
      
      <!-- 背景トラック -->
      <path d='M 30 110 A 80 80 0 0 1 190 110' 
            fill='none' 
            stroke='{colorTrack}' 
            stroke-width='{strokeWidth}' 
            stroke-linecap='round'/>

      {If(value > 0,
        $"<path d='M 30 110 A 80 80 0 0 1 190 110' 
              fill='none' 
              stroke='{colorPrimary}' 
              stroke-width='{strokeWidth}' 
              stroke-linecap='round'
              stroke-dasharray='{251.2 * value / 100} 251.2'/>",
        ""
      )}
      
      {If(targetValue > 0,
        $"<g transform='rotate({-90 + 180 * targetValue / 100} 110 110)'>
          <line x1='110' y1='38' x2='110' y2='22' 
                stroke='{colorTarget}' 
                stroke-width='3' 
                stroke-linecap='round'/>
          <circle cx='110' cy='30' r='4' fill='{colorTarget}'/>
        </g>",
        ""
      )}
      
      {If(showText, 
        $"<text x='110' y='100' text-anchor='middle' font-size='40' font-weight='600' fill='{colorPrimary}' font-family='Roboto, Arial, sans-serif'>
          {Round(value, 0)}
        </text>
        <text x='110' y='116' text-anchor='middle' font-size='16' font-weight='400' fill='{colorTextSecondary}' font-family='Roboto, Arial, sans-serif'>
          {unitText}
        </text>", 
        ""
      )}
      
    </svg>
    ")
)

With関数で簡単カスタマイズ

このスピードメーターゲージの大きな特徴は、編集可能な箇所がすべてWith関数で変数化されている点です。それぞれの値を変更するだけで、見た目を自由にカスタマイズできます。

基本設定

まず、基本となる値の設定から見ていきましょう。

現在値と目標値

value: Slider1_1.Value,  // 現在の値（0-100）
targetValue: 75,         // 目標値（0-100で設定）

valueにはスライダーやデータソースの値を指定します。targetValueで目標値を設定すると、グラフ上にオレンジ色のマーカーが表示されるので、現在の進捗と目標を一目で比較できます。

表示設定

テキスト表示の切り替え

showText: true,  // true: 中央のテキスト表示, false: 非表示

中央に表示される数値や単位を非表示にしたい場合は、showTextをfalseにするだけで対応できます。

単位のカスタマイズ

unitText: "%",  // 単位（"%", "件", "人", "個" など）

単位を変更したい場合は、unitTextを変更します。パーセント表示が不要な場合は空文字""にしたり、「件」「人」「個」など、用途に応じて自由に変更できます。

カラー設定

このゲージでは、それぞれの要素の色を個別に変更できるのが特徴です。

メインカラー（ゲージの色）

colorPrimary: "#7B1FA2",        // Purple 700（メインのゲージ色）
colorPrimaryLight: "#9C27B0",   // Purple 600（使用していない予備）

ゲージやテキストの色を変更したい場合は、colorPrimaryを変更します。

色の例：

colorPrimary: "#1976D2",  // 青系（Blue 700）
colorPrimary: "#43A047",  // 緑系（Green 600）
colorPrimary: "#F57C00",  // オレンジ系（Orange 700）
colorPrimary: "#D32F2F",  // 赤系（Red 700）

目標値マーカーの色

colorTarget: "#F57C00",  // Orange 700（目標値の色）

グラフ上に表示される目標値マーカーの色です。メインカラーとのコントラストを付けることで、目標値が一目で分かるようになっています。

背景とトラックの色

colorBackground: "#FFFFFF",  // 背景色
colorTrack: "#E0E0E0",      // トラック（未達成部分の色）

colorTrackは、ゲージの未達成部分（グレーの部分）の色です。

テキストの色

colorTextPrimary: "#4A148C",    // Purple 900（濃い紫）
colorTextSecondary: "#9E9E9E",  // 薄いテキスト

中央に表示される数値と単位の色です。colorTextPrimaryは数値、colorTextSecondaryは単位に使用されます。

サイズ設定

ゲージの太さ

strokeWidth: 16,  // ゲージの太さ

ゲージの太さを変更したい場合は、strokeWidthの値を調整します。細めにしたい場合は数値を小さく、太めにしたい場合は大きくするだけです。

strokeWidth: 12,  // 細め
strokeWidth: 20,  // 太め

ただし、あまり極端な値にすると、デザインのバランスが崩れます。

YAMLコード

画面も含めてのYAMLコードになります。コードごとコピーして貼り付ければ利用が可能です。

Screens:
  Screen1:
    Children:
      - Image3:
          Control: Image@2.2.3
          Properties:
            Height: =357
            Image: "=With(\r\n    {\r\n        // === 基本設定 ===\r\n        value: valueSlider.Value,\r\n        targetValue: targetValueSlider.Value,                // 目標値（0-100で設定）\r\n        \r\n        // === 表示設定 ===\r\n        showText: true,                 // true: 中央のテキスト表示, false: 非表示\r\n        unitText: \"%\",                  // 単位（\"%\", \"件\", \"人\", \"個\" など）\r\n        \r\n        // === マテリアルデザインカラー（紫ベース） ===\r\n        // Primary Color (メインのゲージ色)\r\n        colorPrimary: \"#7B1FA2\",        // Purple 700\r\n        colorPrimaryLight: \"#9C27B0\",   // Purple 600\r\n        \r\n        // Target Line Color\r\n        colorTarget: \"#F57C00\",         // Orange 700（目標値の色）\r\n        \r\n        // Background Colors\r\n        colorBackground: \"#FFFFFF\",      // 背景\r\n        colorTrack: \"#E0E0E0\",          // トラック（未達成部分）\r\n        \r\n        // Text Colors\r\n        colorTextPrimary: \"#4A148C\",    // Purple 900（濃い紫）\r\n        colorTextSecondary: \"#9E9E9E\",  // 薄いテキスト\r\n        \r\n        // === サイズ設定 ===\r\n        strokeWidth: 16                 // ゲージの太さ\r\n    },\r\n    \"data:image/svg+xml,\" & EncodeUrl($\"\r\n    <svg viewBox='0 0 220 140' xmlns='http://www.w3.org/2000/svg' style='background-color: {colorBackground};'>\r\n      \r\n      <!-- 背景トラック -->\r\n      <path d='M 30 110 A 80 80 0 0 1 190 110' \r\n            fill='none' \r\n            stroke='{colorTrack}' \r\n            stroke-width='{strokeWidth}' \r\n            stroke-linecap='round'/>\r\n\r\n      {If(value > 0,\r\n        $\"<path d='M 30 110 A 80 80 0 0 1 190 110' \r\n              fill='none' \r\n              stroke='{colorPrimary}' \r\n              stroke-width='{strokeWidth}' \r\n              stroke-linecap='round'\r\n              stroke-dasharray='{251.2 * value / 100} 251.2'/>\",\r\n        \"\"\r\n      )}\r\n      \r\n      {If(targetValue > 0,\r\n        $\"<g transform='rotate({-90 + 180 * targetValue / 100} 110 110)'>\r\n          <line x1='110' y1='38' x2='110' y2='22' \r\n                stroke='{colorTarget}' \r\n                stroke-width='3' \r\n                stroke-linecap='round'/>\r\n          <circle cx='110' cy='30' r='4' fill='{colorTarget}'/>\r\n        </g>\",\r\n        \"\"\r\n      )}\r\n      \r\n      {If(showText, \r\n        $\"<text x='110' y='100' text-anchor='middle' font-size='40' font-weight='600' fill='{colorPrimary}' font-family='Roboto, Arial, sans-serif'>\r\n          {Round(value, 0)}\r\n        </text>\r\n        <text x='110' y='116' text-anchor='middle' font-size='16' font-weight='400' fill='{colorTextSecondary}' font-family='Roboto, Arial, sans-serif'>\r\n          {unitText}\r\n        </text>\", \r\n        \"\"\r\n      )}\r\n      \r\n    </svg>\r\n    \")\r\n)"
            Width: =497
            X: =55
            Y: =334
      - valueSlider:
          Control: Classic/Slider@2.1.0
          Properties:
            X: =24
            Y: =755
      - targetValueSlider:
          Control: Classic/Slider@2.1.0
          Properties:
            Default: =75
            X: =24
            Y: =873

まとめ

このゲージは以下のような場面で活用できます：

• KPI達成率の可視化
• プロジェクト進捗の表示
• 売上目標の進捗管理
• 顧客満足度の表示

コードは概要欄のサイトからコピペするか、SVGのコードを直接コピーして利用できます。

免責事項

このコードはご自由にお使いいただけますが、使用によって生じたいかなる損害についても、作成者は責任を負いかねます。ご自身の環境でテストを行った上で、自己責任でご利用ください。

また、コードの動作保証はいたしかねますので、あらかじめご了承ください。