# Panel types for dashboards > 原文：[https://docs.gitlab.com/ee/operations/metrics/dashboards/panel_types.html](https://docs.gitlab.com/ee/operations/metrics/dashboards/panel_types.html) * [Area or Line Chart](#area-or-line-chart) * [Anomaly chart](#anomaly-chart) * [Bar chart](#bar-chart) * [Column chart](#column-chart) * [Stacked column](#stacked-column) * [Single Stat](#single-stat) * [Percentile based results](#percentile-based-results) * [Heatmaps](#heatmaps) # Panel types for dashboards[](#panel-types-for-dashboards "Permalink") 監視儀表板中支持以下面板類型. ## Area or Line Chart[](#area-or-line-chart "Permalink") 要將面積圖面板類型添加到儀表盤，請查看以下樣本儀表盤文件： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group Title' panels: - type: area-chart # or line-chart title: 'Area Chart Title' y_label: "Y-Axis" y_axis: format: number precision: 0 metrics: - id: area_http_requests_total query_range: 'http_requests_total' label: "Instance: {{instance}}, Method: {{method}}" unit: "count" ``` 請注意以下屬性： | Property | Type | Required | Description | | --- | --- | --- | --- | | type | string | no | 要渲染的面板類型. 區域面板類型的可選 | | query_range | string | required | 對于區域面板類型，必須使用[范圍查詢](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) | [](../../../user/project/integrations/img/prometheus_dashboard_area_panel_type_v12_8.png) 從[版本 12.8](https://gitlab.com/gitlab-org/gitlab/-/issues/202696)開始，y 軸值將根據數據自動縮放. 以前，它總是從 0 開始. ## Anomaly chart[](#anomaly-chart "Permalink") 在 GitLab 12.5 中[引入](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/16530) . 要將異常圖表面板類型添加到儀表盤，請添加*恰好具有* 3 個指標的面板. 第一個指標代表當前狀態，第二個和第三個指標分別代表上限和下限： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group Title' panels: - type: anomaly-chart title: "Chart Title" y_label: "Y-Axis" metrics: - id: anomaly_requests_normal query_range: 'http_requests_total' label: "# of Requests" unit: "count" metrics: - id: anomaly_requests_upper_limit query_range: 10000 label: "Max # of requests" unit: "count" metrics: - id: anomaly_requests_lower_limit query_range: 2000 label: "Min # of requests" unit: "count" ``` 請注意以下屬性： | Property | Type | Required | Description | | --- | --- | --- | --- | | type | string | required | 異常面板類型必須為`anomaly-chart` | | query_range | yes | required | 對于異常面板類型，必須在每個指標中使用[范圍查詢](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) . | [](../../../user/project/integrations/img/prometheus_dashboard_anomaly_panel_type.png) ## Bar chart[](#bar-chart "Permalink") 要將條形圖添加到儀表板，請查看以下樣本儀表板文件： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group title' panels: - type: bar title: "Http Handlers" x_label: 'Response Size' y_axis: name: "Handlers" metrics: - id: prometheus_http_response_size_bytes_bucket query_range: "sum(increase(prometheus_http_response_size_bytes_bucket[1d])) by (handler)" unit: 'Bytes' ``` 請注意以下屬性： | Property | Type | Required | Description | | --- | --- | --- | --- | | `type` | string | yes | 要渲染的面板類型. 對于條形圖類型，設置為`bar` | | `query_range` | yes | yes | 對于條形圖，必須使用[范圍查詢](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) | [](../../../user/project/integrations/img/prometheus_dashboard_bar_chart_panel_type_v12.10.png) ## Column chart[](#column-chart "Permalink") 要將列面板類型添加到儀表板，請查看以下樣本儀表板文件： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group title' panels: - title: "Column" type: "column" metrics: - id: 1024_memory query: 'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job) / count(avg(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) without (job)) /1024/1024' unit: MB label: "Memory Usage" ``` 請注意以下屬性： | Property | Type | Required | Description | | --- | --- | --- | --- | | type | string | yes | 要渲染的面板類型. 對于列面板類型，設置為`column` | | query_range | yes | yes | 對于列面板類型，必須使用[范圍查詢](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) | [](../../../user/project/integrations/img/prometheus_dashboard_column_panel_type.png) ## Stacked column[](#stacked-column "Permalink") 在 GitLab 12.8 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/30583) . 要將堆疊的列面板類型添加到儀表板，請查看以下樣本儀表板文件： ``` dashboard: 'Dashboard title' priority: 1 panel_groups: - group: 'Group Title' priority: 5 panels: - type: 'stacked-column' title: "Stacked column" y_label: "y label" x_label: 'x label' metrics: - id: memory_1 query_range: 'memory_query' label: "memory query 1" unit: "count" series_name: 'group 1' - id: memory_2 query_range: 'memory_query_2' label: "memory query 2" unit: "count" series_name: 'group 2' ``` [](../../../user/project/integrations/img/prometheus_dashboard_stacked_column_panel_type_v12_8.png) | Property | Type | Required | Description | | --- | --- | --- | --- | | `type` | string | yes | 要渲染的面板類型. 對于堆疊式柱面板類型，設置為" `stacked-column` | | `query_range` | yes | yes | 對于堆疊式列面板類型，必須使用[范圍查詢](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) | ## Single Stat[](#single-stat "Permalink") 要將單個狀態面板類型添加到儀表板，請查看以下樣本儀表板文件： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group Title' panels: - title: "Single Stat" type: "single-stat" metrics: - id: 10 query: 'max(go_memstats_alloc_bytes{job="prometheus"})' unit: MB label: "Total" ``` 請注意以下屬性： | Property | Type | Required | Description | | --- | --- | --- | --- | | type | string | yes | 要渲染的面板類型. 對于單一統計信息面板類型，設置為`single-stat` | | field | string | no | 面板顯示指標的值. 要使面板顯示標簽的值，請在該鍵中放置標簽的名稱. | | query | string | yes | For single stat panel types, you must use an [instant query](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) | [](../../../user/project/integrations/img/prometheus_dashboard_single_stat_panel_type.png) ## Percentile based results[](#percentile-based-results "Permalink") 在 GitLab 12.8 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/201946) . 有時需要將查詢結果表示為 100 中的百分比值.您可以在面板定義的根部使用`max_value`屬性： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group Title' panels: - title: "Single Stat" type: "single-stat" max_value: 100 metrics: - id: 10 query: 'max(go_memstats_alloc_bytes{job="prometheus"})' unit: '%' label: "Total" ``` 例如，如果查詢值為`53.6` ，則將`%`添加為單位將得出`53.6%`的單個統計值，但是如果查詢的最大期望值為`120` ，則該值為`44.6%` . 添加`max_value`會導致顯示正確的百分比值. ## Heatmaps[](#heatmaps "Permalink") 在 GitLab 12.5 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/30581) . 要將熱圖面板類型添加到儀表板，請查看以下樣本儀表板文件： ``` dashboard: 'Dashboard Title' panel_groups: - group: 'Group Title' panels: - title: "Heatmap" type: "heatmap" metrics: - id: 10 query: 'sum(rate(nginx_upstream_responses_total{upstream=~"%{kube_namespace}-%{ci_environment_slug}-.*"}[60m])) by (status_code)' unit: req/sec label: "Status code" ``` 請注意以下屬性： | Property | Type | Required | Description | | --- | --- | --- | --- | | type | string | yes | 要渲染的面板類型. 對于熱圖面板類型，設置為`heatmap` | | query_range | yes | yes | 對于區域面板類型，必須使用[范圍查詢](https://s0prometheus0io.icopy.site/docs/prometheus/latest/querying/api/) | [](../../../user/project/integrations/img/heatmap_panel_type.png) **警告：**當查詢返回太多數據點時，熱圖數據桶的尺寸趨于向下至 0，從而使圖表的數據不可見，如下圖所示. 要解決此問題，請通過更改指標儀表板 UI 上的時間范圍過濾器，或將**step**屬性添加到儀表板的 YAML 文件中，來限制返回的數據量. [](../../../user/project/integrations/img/heatmap_chart_too_much_data_v_13_2.png)