다음을 통해 공유


그리드 시각화

그리드 또는 테이블은 사용자에게 데이터를 표시하는 일반적인 방법입니다. 통합 문서의 그리드 열 스타일을 개별적으로 지정하여 보고서에 풍부한 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-first
리소스 메트릭 값을 가져올 리소스 집합입니다. 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. 쿼리 컨트롤 도구 모음에서 열 설정 단추를 선택합니다.
  2. 열 설정 편집 창에서 스타일을 지정할 열을 선택합니다.
  3. 열 렌더러에서 열 지도, 막대형 또는 아래 막대형을 선택하고 관련 설정을 선택하여 열의 스타일을 지정합니다.

다음 예제에서는 막대형 스타일로 지정된 요청 열을 보여줍니다.

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

이 옵션은 일반적으로 셀에서 들어오는 컨텍스트가 있는 다른 보기로 이동하거나, URL을 열 수 있습니다.

사용자 지정 서식

통합 문서에서 셀 값의 숫자 서식을 설정할 수도 있습니다. 이 서식을 설정하려면 사용자 지정 서식 확인란을 선택합니다(사용 가능한 경우).

서식 지정 옵션 설명
단위 백분율, 개수, 시간, 바이트, 개수/시간 및 바이트/시간에 대한 다양한 옵션이 있는 열의 단위입니다. 예를 들어 값 1234에 대한 단위를 밀리초로 설정하면 값 1234는 1.234s로 렌더링됩니다.
스타일 10진수, 통화, 백분율 등 렌더링에 사용되는 형식입니다.
그룹 구분 기호 표시 그룹 구분 기호를 표시하기 위한 확인란입니다. 미국에서는 1234를 1,234로 렌더링합니다.
최소 정수 자릿수 사용할 최소 정수 자릿수(기본값 1)입니다.
최소 소수 자릿수 사용할 최소 소수 자릿수(기본값은 0)입니다.
최대 소수 자릿수 사용할 최대 소수 자릿수입니다.
최소 유효 자릿수 사용할 최소 유효 자릿수(기본값 1)입니다.
최대 유효 자릿수 사용할 최대 유효 자릿수입니다.
누락된 값에 대한 사용자 지정 텍스트 데이터 요소에 값이 없는 경우 공백 대신 이 사용자 지정 텍스트를 표시합니다.

사용자 지정 날짜 형식

열을 날짜/시간 렌더러로 설정하도록 지정한 경우 사용자 지정 날짜 형식 지정 확인란을 사용하여 사용자 지정 날짜 형식 옵션을 지정할 수 있습니다.

서식 지정 옵션 설명
스타일 날짜를 짧은 형식, 긴 형식, 전체 형식으로 렌더링하거나 시간을 짧은 시간 형식 또는 긴 시간 형식으로 렌더링하는 형식입니다.
현재 상태 현지 시간 표시(기본값) 또는 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.

이전 예제에서 녹색 또는 빨간색 공유 색상표와 눈금은 열 평균, 중앙값, p80, p95p99의 색을 지정하는 데 사용됩니다. 요청 열에는 별도의 파란색 색상표가 사용됩니다.

공유 눈금

공유 눈금을 가져오려면

  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.

지원되는 아이콘 이름은 다음과 같습니다.

  • 취소됨
  • 중요
  • disabled
  • error
  • 실패
  • info
  • 없음
  • 보류 중
  • 중지됨
  • 질문
  • 성공
  • 알 수 없음
  • 경고
  • 초기화되지 않음
  • resource
  • up
  • 다운
  • left
  • right
  • trendup
  • trenddown
  • 4
  • 3
  • 2
  • 1
  • Sev0
  • Sev1
  • Sev2
  • Sev3
  • Sev4
  • 발생 시기
  • 해결됨
  • 사용 가능
  • Unavailable
  • 성능 저하됨
  • Unknown
  • 빈 템플릿

소수부 단위 백분율

소수부 단위, 줄여서 "fr"은 다양한 유형의 그리드에서 일반적으로 사용되는 동적 측정 단위입니다. 창 크기 또는 해상도가 변경되면 fr 너비도 변경됩니다.

다음 스크린샷에서는 총 8개의 열이 있고 각 열의 너비가 1fr로 동일한 표를 보여줍니다. 창 크기가 변경되면 각 열의 너비가 비례적으로 변경됩니다.

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

다음 이미지는 첫 번째 열이 50% 너비로 설정된 것만 제외하고 동일한 테이블을 보여줍니다. 이 설정은 열을 전체 그리드 너비의 절반으로 동적으로 설정합니다. 창 크기를 조정하면 창 크기가 너무 작은 경우를 제외하고 50% 너비가 유지됩니다. 이러한 동적 열은 내용에 따라 최소 너비를 사용합니다.

그리드의 나머지 50%는 8개의 총 소수부 단위로 분할됩니다. Kind 열은 2fr로 설정되어 있으므로 나머지 공간의 1/4을 사용합니다. 다른 열은 각각 1fr이므로 각각 그리드 오른쪽 절반의 1/8을 사용합니다.

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.

다음 단계