Grafana----Table Panel

新的表面板非常灵活,既支持时间序列的多模式,也支持表、注释和原始JSON数据。它还提供日期格式化和值格式化和着色选项。
要查看表板动作和测试不同的配置数据,查看台面板展示在grafana操场。

 

Options overview

table面板有很多方法来操纵数据以获得最佳呈现。

Data:控制如何将查询转换为表。

Table Display:表显示的选项。

Column styles:列值格式化和显示选项。

Data to Table

 

 to Table Transform:这是将数据/度量查询转换成表格式的主要选项。

Columns:允许您选择表中所需的列。只适用于某些转换。

 

  Time series to rows 这:意味着得到一个Time、Metric和a value。其中Metric是时间序列的名称,如下。

  Metric:所有字段名,该字段的value字段值。

       

  Time series to columns:  

    此转换允许您采用多个时间序列并按时间分组。这将导致主列为Time和每个时间序列的列。

    

 Time series aggreaations

    此表转换将按公制将表划分,允许Avg, Min, Max, Total, Current and Count.。可以添加多个列。

       

Annotations

  如果在仪表板中启用了注释,则可以让表显示它们。如果配置此模式,则在度量选项卡中的任何查询都将被忽略。

 Table

 JSON Data

Table Display

 

Pagination(Page size):表中显示字段允许您控制分页(页面大小)是在该阈值,多少行划分分多少页。例如,如果你的表有95条记录,有10个分页的价值,你的表将被分在9页。

scroll:选择后,面板内显示滚动条。没选择,面板会显示所有行的高度

Font sIze:允许您增加或缩小面板的大小,相对于默认字体大小。 

Column Styles

列样式允许您控制日期和数字是如何格式化的。

  

Name or regex:名称或正则表达式的字段控制的规则应适用于哪些列。正则表达式或名称过滤器将匹配列名不匹配列值。

Type:三种支持的类型是数字、字符串和日期。

Format:置为日期时(Time)才可用

Unit、Decimals:指定单元和小数位数。

Coloring、Thresholds:指定颜色模式和阈值限制。

  coloring:Disabled(不启用颜色模式)、cell(列)、value(值)、row(行)

  Thresholds:不同值可以显示不同颜色,在面板中动态改变背景和值的颜色,这取决于singlestat value。阈值字段接受2个逗号分隔的值,这些值代表3个范围,直接对应于三种颜色。例如:如果阈值是70, 90,那么第一个颜色代表< 70,第二个颜色代表70到90,第三个颜色代表> 90。

 

Colors

invert

 Add column style rule:添加新列规则。

转载于:https://www.cnblogs.com/michellexiaoqi/p/7274370.html

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table-v2是一个基于Vue.js框架的表格组件,它提供了许多功能,例如:排序、分页、筛选等等。下面是一些关于el-table-v2的介绍和演示: 1. 如何使用el-table-v2? ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ name: 'Tom', age: 20, address: 'No. 189, Grove St, Los Angeles' }, { name: 'Jerry', age: 18, address: 'No. 1001, Westlake Ave N, Seattle' }] } } } </script> ``` 2. 如何使用el-table-v2实现分页? ```html <template> <el-table :data="tableData" :row-key="row => row.id" :default-sort="{prop: 'date', order: 'descending'}" :pagination="{ total: 100, pageSize: 10, currentPage: 1 }"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="date" label="Date" sortable></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [] }; }, created() { for (let i = 0; i < 100; i++) { this.tableData.push({ id: i + 1, name: 'Item ' + (i + 1), date: new Date(2018, 9, 1, 0, 0, i) }); } } }; </script> ``` 3. 如何使用el-table-v2实现筛选? ```html <template> <div> <el-input v-model="filter" placeholder="请输入内容" style="margin-bottom: 20px;"></el-input> <el-table :data="tableData" :filters="filters" @filter-change="handleFilterChange"> <el-table-column prop="name" label="Name" :filters="[{text: 'Tom', value: 'Tom'}, {text: 'Jerry', value: 'Jerry'}]" :filter-method="nameFilter"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [{ name: 'Tom', age: 20, address: 'No. 189, Grove St, Los Angeles' }, { name: 'Jerry', age: 18, address: 'No. 1001, Westlake Ave N, Seattle' }], filters: { nameFilter: function(value, row) { return row.name === value; } }, filter: '' } }, methods: { handleFilterChange(filters) { this.filters = filters; }, nameFilter(value, row) { return row.name.indexOf(value) !== -1; } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值