グリッドの視覚化

グリッドまたはテーブルは、ユーザーにデータを表示する一般的な方法です。 ブック内のグリッドの列のスタイルを個別に設定して、レポートに豊富な UI を提供できます。 単純なテーブルでは、データが表示されても、読みにくく、必ずしも分析情報が明確になるとは限りません。 グリッドのスタイル設定を行うと、データの読み取りと解釈が容易になります。

次の例は、アイコン、ヒートマップ、およびスパークバーを組み合わせて複雑な情報を表示するグリッドを示しています。 このブックには、並べ替え、検索ボックス、および [分析に移動] ボタンも用意されています。

Screenshot that shows a log-based grid.

ログ ベースのグリッドを追加する

  1. ツール バーの [編集] を選択して、ブックを編集モードに切り替えます。
  2. [クエリの追加] を選んで、ログ クエリ コントロールをブックに追加します。
  3. [クエリの種類] で、[ログ] を選択します。 [リソースの種類] で、[Application Insights] などを選択し、ターゲットにするリソースを選択します。
  4. クエリ エディターを使用して、分析用の KQL を入力します。 たとえば、メモリがしきい値を下回る VM です。
  5. [視覚化][グラフ] に設定します。
  6. 必要に応じて時間範囲、サイズ、カラー パレット、凡例などのパラメーターを設定します。

Screenshot that shows a log-based grid query.

ログ チャートのパラメーター

パラメーター 説明
クエリの種類 使用するクエリの種類。 ログ、Azure Resource Graph:
リソースの種類 ターゲットとするリソースの種類。 Application Insights、Log Analytics、または Azure ファースト
リソース メトリック値の取得元となるリソースのセット。 MyApp1
時間の範囲 ログ グラフを表示する時間枠。 過去 1 時間、過去 24 時間
グラフ 使用する視覚化。 グリッド
サイズ コントロールの垂直方向のサイズ。 小、中、大、または最大
クエリ グラフの視覚化で想定される形式でデータを返す任意の KQL クエリ。 requests | summarize Requests = count() by name

単純なグリッド

ブックを使用すると、KQL の結果を単純なテーブルとしてレンダリングできます。 次のグリッドは、アプリ内の要求数と要求の種類ごとの一意のユーザー数を示しています。

requests
| where name !endswith('.eot')
| summarize Requests = count(), Users = dcount(user_Id) by name
| order by Requests desc

Screenshot that shows a log-based grid in edit mode.

グリッドのスタイル設定

ヒートマップとしてスタイル設定された列:

Screenshot that shows a log-based grid with columns styled as heatmaps.

バーとしてスタイル設定された列:

Screenshot that shows a log-based grid with columns styled as bars.

グリッド列をスタイル設定する

  1. クエリ コントロール ツールバーの [Column Setting](列設定) ボタンを選択します。
  2. [列の設定の編集] ペインで、スタイル設定する列を選択します。
  3. [列レンダラー] で、[ヒートマップ][横棒]、または [棒 (下)] を選択し、関連する設定を選択して列のスタイルを設定します。

次の例は、棒グラフとしてスタイル設定された [要求] 列を示しています。

Screenshot that shows a log-based grid with the Requests column styled as a bar.

通常、このオプションを使用すると、セルから取得したコンテキストがある他のビューに移動します。URL を開く場合もあります。

カスタム書式設定

ブック内のセル値の数値書式を設定することもできます。 この書式を設定するには、使用可能なときに [カスタムの書式設定] チェック ボックスをオンにします。

書式設定のオプション 説明
Units 列の単位。パーセンテージ、カウント、時間、バイト、カウント/時間、バイト/時間などのさまざまなオプションがあります。 たとえば、値 1234 の単位をミリ秒に設定でき、1.234s としてレンダリングされます。
Style レンダリングに使用する形式 (10 進、通貨、パーセントなど)。
グループ区切り記号の表示 グループの区切り記号を表示するチェック ボックス。 米国では 1234 を 1,234 とレンダリングします。
整数の最小桁数 使用する整数の最小桁数 (既定値は 1)。
小数点以下の最小桁数 使用する小数部の最小桁数 (既定値は 0)。
小数点以下の最大桁数 使用する小数部の最大桁数。
有効な最小桁数 使用する最小有効桁数 (既定値は 1)。
有効な最大桁数 使用する最大有効桁数。
不足している値のカスタム テキスト データ ポイントに値がないときは、空白ではなく、このカスタム テキストを表示します。

カスタムの日付の書式設定

列を日付/時刻レンダラーに設定することを指定したときは、[カスタム日付の書式設定] チェックボックスを使用して、カスタムの日付の書式設定オプションを指定できます。

書式設定のオプション 説明
Style 日付を短い、長い、完全のいずれか、または時刻を短い、長いのいずれかでレンダリングするための形式。
公開する時間帯の種類 時刻をローカル時刻 (既定値) として表示するか、UTC として表示するかを決定できます。 選択した日付の書式スタイルによっては、UTC/タイムゾーン情報が表示されない場合があります。

カスタムの列幅の設定

[列の設定][列のカスタム幅] フィールドを使用して、グリッド内の任意の列の幅をカスタマイズできます。

Screenshot that shows column settings with the Custom Column Width field indicated in a red box.

フィールドが空白のままの場合、列の文字数および表示される列の数に基づいて、幅が自動的に決定されます。 既定の単位は "characters (文字)" の省略形の "ch" です。

ラベルの [(現在の幅)] ボタンを選択すると、選択した列の現在の幅がテキスト フィールドに設定されます。 測定単位のない値が [列のカスタム幅] フィールドに存在する場合は、既定値が使用されます。

使用可能な測定の単位は次のとおりです。

測定の単位 定義
ch 文字 (既定値)
px ピクセル
fr 分数単位
% percentage

入力の検証: 検証で不合格になった場合、フィールドの下に赤いガイダンス メッセージが表示されますが、幅は適用できます。 入力に値がある場合は、解析されます。有効な測定単位が見つからない場合は、既定値が使用されます。

幅は、任意の値に設定できます。 幅には最小や最大はありません。 非表示の列については、[列のカスタム幅] フィールドは無効です。

次に例をいくつか示します。

スパーク ラインと下の棒グラフ

次の例は、要求名ごとの要求数と傾向を示しています。

requests
| make-series Trend = count() default = 0 on timestamp from ago(1d) to now() step 1h by name
| project-away timestamp
| join kind = inner (requests
    | summarize Requests = count() by name
    ) on name
| project name, Requests, Trend
| order by Requests desc

Screenshot that shows a log-based grid with a bar underneath and a spark line.

共有スケールおよびカスタム書式設定を使用したヒートマップ

この例では、さまざまな要求の持続時間のメトリックと数を示します。 ヒートマップ レンダラーは、設定に設定されている最小値を使用するか、列の最小値と最大値を計算します。 選択したパレットからセルの背景色を割り当てます。 色は、列の最小と最大の値を基準としたセルの値に基づいています。

requests
| summarize Mean = avg(duration), (Median, p80, p95, p99) = percentiles(duration, 50, 80, 95, 99), Requests = count() by name
| order by Requests desc

Screenshot that shows a log-based grid with a heatmap that has a shared scale across columns.

前の例では、共有パレット (緑または赤) とスケールを使用して、列 (MeanMedianp80p95、および p99) の色が設定されています。 [要求] 列には、青色の別のパレットが使用されます。

共有スケール

共有スケールを取得するには、以下のようにします。

  1. 正規表現を使用して、設定を適用する複数の列を選択します。 たとえば、列名を Mean|Median|p80|p95|p99 に設定して、それらすべてを選択します。
  2. 個々の列の既定の設定を削除します。

新しい複数列の設定が適用されて、共有スケールが含まれるようになります。

Screenshot that shows a log-based grid setting to get a shared scale across columns.

状態を表すアイコン

次の例では、p95 の持続時間に基づいて、要求のカスタム状態を示します。

requests
| summarize p95 = percentile(duration, 95) by name
| order by p95 desc
| project Status = case(p95 > 5000, 'critical', p95 > 1000, 'error', 'success'), name, p95

Screenshot that shows a log-based grid with a heatmap that has a shared scale across columns using the preceding query.

サポートされているアイコン名は次のとおりです。

  • 取り消し済み
  • critical
  • disabled
  • error
  • 失敗
  • info
  • なし
  • pending
  • stopped
  • 質問
  • success
  • unknown
  • warning
  • 未初期化
  • resource
  • up
  • ダウン
  • left
  • right
  • trendup
  • trenddown
  • 4
  • 3
  • 2
  • 1
  • Sev0
  • Sev1
  • Sev2
  • Sev3
  • Sev4
  • 発生するタイミング
  • 解決済み
  • 利用可能
  • 使用不可
  • 低下しています
  • Unknown
  • 空白

分数単位の割合

"fr" と省略される分数単位は、さまざまな種類のグリッドで一般的に使用される動的な測定単位です。 ウィンドウのサイズや解像度が変化すると、fr の幅も変わります。

次のスクリーンショットは、それぞれの幅が 1fr で幅がすべて同じである 8 つの列を含むテーブルを示しています。 ウィンドウのサイズが変わると、各列の幅も比例して変化します。

Screenshot that shows columns in a grid with a column-width value of 1fr each.

次の画像は、最初の列が 50% の幅に設定されていることを除いて、同じテーブルを示しています。 この設定により、この列はグリッドの合計幅の半分に動的に設定されます。 ウィンドウのサイズを変更しても、ウィンドウのサイズが小さくなりすぎない限り、50% の幅が維持されます。 これらの動的列は、それらの内容に基づいて、最小の幅が設定されます。

グリッドの残りの 50% は、合計 8 個の分数単位によって分割されます。 Kind 列は 2fr に設定されているため、残りのスペースの 4 分の 1 を占めます。 他の列はそれぞれ 1fr であるため、グリッドの右半分の 8 分の 1 をそれぞれ占めます。

Screenshot that shows columns in a grid with one column-width value of 50% and the rest as 1fr each.

fr、%、px、および ch の各幅を組み合わせることは可能で、前の例と同じように動作します。 静的単位 (ch および px) によって設定される幅は、ウィンドウや解像度が変更された場合でも変化しないハード定数です。

% によって設定される列は、グリッドの合計幅に基づいて、その割合を占めます。 以前の最小幅のため、この幅が正確でない場合があります。

fr で設定された列は、割り当てられた分数単位の数に基づいて、残りのグリッド スペースを分割します。

Screenshot that shows columns in a grid with an assortment of different width units used.

次のステップ