PowerShell + XAML + WPFで作る「JSONデータ件数の円グラフ表示ツール」

PowerShellでも、GUIやグラフを自在に扱えることをご存じでしょうか？
この記事では、PowerShell 5.x で JSON データを読み込み、カテゴリごとの件数を WPFウィンドウ上に円グラフ で可視化する方法を紹介します。

🎯 ゴール

• JSONファイルを読み込む
• カテゴリごとの件数を集計
• ダークテーマのWPFウィンドウに円グラフで表示

🗂 構成

C:\myTool\JsonPieChart\
├─ Show-PieChart.ps1
└─ ChartWindow.xaml

🧩 JSONサンプル (data.json)

[
  {"Category": "A", "Value": 10},
  {"Category": "B", "Value": 20},
  {"Category": "A", "Value": 30},
  {"Category": "C", "Value": 15},
  {"Category": "B", "Value": 25}
]

🪶 ChartWindow.xaml

WPFのレイアウト定義ファイルです。
WindowsFormsHostを使って、.NETのChartコントロールをWPF上に埋め込みます。

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
        xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
        Title="JSONデータ件数 - 円グラフ" Height="400" Width="600"
        Background="#1E1E1E" WindowStartupLocation="CenterScreen">

    <Grid Margin="10">
        <wfi:WindowsFormsHost Name="ChartHost"/>
    </Grid>
</Window>

💻 Show-PieChart.ps1

# Requires -Version 5.1
Add-Type -AssemblyName PresentationCore, PresentationFramework, WindowsBase
Add-Type -AssemblyName System.Windows.Forms
Add-Type -AssemblyName System.Windows.Forms.DataVisualization

# ===== XAML 読み込み =====
[xml]$xaml = Get-Content -Path "C:\myTool\JsonPieChart\ChartWindow.xaml" -Raw
$reader = (New-Object System.Xml.XmlNodeReader $xaml)
$window = [Windows.Markup.XamlReader]::Load($reader)

# ===== コントロール参照 =====
$chartHost = $window.FindName("ChartHost")

# ===== JSON 読み込み =====
$jsonPath = "C:\myTool\JsonPieChart\data.json"
$data = Get-Content $jsonPath -Raw | ConvertFrom-Json

# ===== 件数集計 =====
$grouped = $data | Group-Object -Property Category | Select-Object Name,Count

# ===== Chart 構築 =====
$chart = New-Object System.Windows.Forms.DataVisualization.Charting.Chart
$chart.BackColor = [System.Drawing.Color]::FromArgb(30,30,30)
$chart.ForeColor = [System.Drawing.Color]::White
$chart.Width = 560
$chart.Height = 340

$chartArea = New-Object System.Windows.Forms.DataVisualization.Charting.ChartArea
$chartArea.BackColor = [System.Drawing.Color]::FromArgb(45,45,48)
$chartArea.Area3DStyle.Enable3D = $true
$chart.ChartAreas.Add($chartArea)

$series = New-Object System.Windows.Forms.DataVisualization.Charting.Series
$series.ChartType = [System.Windows.Forms.DataVisualization.Charting.SeriesChartType]::Pie
$series.IsValueShownAsLabel = $true
$series.LabelForeColor = [System.Drawing.Color]::White
$series.Font = New-Object System.Drawing.Font("Meiryo UI", 10)

foreach ($item in $grouped) {
    [void]$series.Points.AddXY($item.Name, $item.Count)
}

$chart.Series.Add($series)
$chart.Legends.Add("Legend1")

# ===== WPF に埋め込み =====
$chartHost.Child = $chart

# ===== 表示 =====
$window.ShowDialog() | Out-Null

▶ 実行方法

PowerShell で以下を実行します。

powershell -ExecutionPolicy Bypass -File "C:\myTool\JsonPieChart\Show-PieChart.ps1"

📊 出力結果

• タイトル：「JSONデータ件数 - 円グラフ」
• 背景はダークグレー、フォントは白
• 各カテゴリごとに件数ラベル付きで可視化
• 3D円グラフで見やすい構成

⚙️ 応用例

🎨 3Dを無効化する

$chartArea.Area3DStyle.Enable3D = $false

💡 合計値で集計する場合

$grouped = $data | Group-Object Category | ForEach-Object {
    [PSCustomObject]@{ Name = $_.Name; Count = ($_.Group | Measure-Object Value -Sum).Sum }
}

📎 まとめ

PowerShellでも、ちょっとしたスクリプトとXAMLでダッシュボードのようなUIが簡単に作れます。
業務ツールの軽量可視化や、ログ集計の確認に活用してみてください。