概述
本指南将研究图表部件：它们的功能、特性、部件的基本和高级设置以及部件的数据键。
图表部件允许你使用可自定义的折线图和条形图显示时序数据也可以使用各种饼图来显示最新值。
创建图表部件
添加任何图表部件到仪表板步骤：
- 进入编辑模式
- 单击屏幕中央“添加新部件”接钮
- 选择图表部件包
- 选择时序条形部件
- 添加数据源
- 添加数据键
- 拖动部件调整大小并单击保存所有应用的更改
- 仪表板中显示部件
图表部件
图表部件分为时间序列和最新值部件可用于可视化时间序列数据随时间的变化，当需要查看多个实体的最新属性值或时间序列数据时将使用最新值部件。
时序部件
时序部件可视化时间序列数据随时间的变化在此处阅读如何设置时间窗口。
条形图
条形图部件显示时间序列数据随时间的变化示例显示了温度数据。
折线图
折线图部件显示时间序列数据随时间的变化示例显示了温度数据。
状态图
状态图组件显示一段时间内实体状态的变化，例如：如果设备打开和关闭。
最新值
最新值部件显示多个实体的属性或时间序列数据的最新值主要支持数值。
雷达图
雷达部件显示雷达图中多个实体的最新属性或时间序列数据仅支持数值。
在示例中部件显示三个设备的最新压力时序数据。
旭日图
旭日图部件显示坐标面积图中多个实体的最新属性或时序数值仅支持数值。
在该示例中组件显示三个设备的最新压力时序数据。
饼状图表
Pie - Chart.js显示饼状图表中多个实体的最新属性或时间序列数据仅支持数值。
在示例中部件显示三个设备的最新温度时序数据。
饼状图
Pie - Flot部件在饼图中显示多个实体的最新属性或时序数据仅支持数值。
在示例中部件显示三个设备的最新压力时序数据。
环形图
环形图部件在饼图中显示多个实体的最新属性或时序数据仅支持数值。
在示例中部件显示三个设备的最新湿度时列数据。
条形图
条形图部件将多个实体的属性或时序数据的最新值显示为单独的条形图唯一允许使用数值的最新值图表部件。
在示例中部件显示三个设备的最新压力时序数据。
设置
基础
基本微件设置负责微件的外观和样式：从标题样式和图例配置到移动设备的设置。
ThingsBoard部件都具有相同的基础设置可以在此处了解如何自定义它们。
高级
高级设置因不同的部件类型而异高级设置负责配置部件的特定功能，进入部件编辑模式并开始配置高级设置。
具体步骤如下：
- 进入部件编辑模式
- 单击高级选项卡
时序条形图
1. 通用设置
1.1. 堆叠
数据聚合函数未设置为None请使用此函数，如果选中“堆叠”框则条形将根据所用实体的值进行拆分否则部件将显示所用实体值的总和要查看所有实体的值将鼠标悬停在栏上。
- 单击时间窗口选择聚合函数并更新
- 进入部件编辑模式
- 单击高级选项卡禁用堆叠并保存应用更改
- 单击保存更改
- 悬停鼠标查看数据
如果数据未聚合则可以通过更改数字来调整非聚合数据的默认条形宽度（毫秒）此操作会使图表的条形更宽。
条形对齐负责在图表微件上相对于时间点放置条形
所有阈值的默认线宽、阴影大小、字体颜色和大小适用于时列折线图和状态图部件。
工具提示值格式函数f(value)用于要手动自定义工具提示时通过设置或高级数据密钥配置自定义将在工具提示中显示的值，通过设置进行的工具提示配置是基本的可同时应用于所有实体。在高级数据密钥配置中配置时它仅适用于特定的时序数据，基本工具提示功能将被此配置覆盖。
但是如果部件需要个性化提示工具提示值格式函数是非常适用的，假设温度数据并且希望在部件上查看摄氏和华氏值该值将以两个浮点显示。
- 输入自定义提示函数并应用更改
- 单击保存应用更改
- 悬停鼠标查看提示
1.2. 网格设置
可以更改图表网格的外观：自定义背景、网格框及其刻度的颜色更改线条的宽度并关闭其可见性。
- 在高级选项卡中转到“网格设置”然后单击“圆圈”图标在对话框中移动滑块以调整颜色和透明度，完成后单击选择以应用更改
- 单击应用更改
- 单击保存更改
1.3. 坐标设置
- 单击应用更改
- 单击保存更改
1.4. 格式化函数f(value)
假设有遥测采用非常大的数字的值，尤其是当值附近有一个特殊符号时，但是需要构建一个小图（因为仪表板上可用空间有限）因此使用ticks-formatter函数可以将ticks值转换为更紧凑的形式。
- 进入部件编辑模式
- 单击高级选项卡输入自定义刻度格式化函数并保存应用更改
- 单击保存更改
- 悬停鼠标查看提示
2.比较设置
比较设置允许比较特定时间段内的值差异在“历史记录”时间窗口中设置时间。
- 选择历史时间窗口单击更新
- 单击高级选项卡中启用比较
- 单击保存更改
- 鼠标悬停在部件上可以看到带有比较数据的工具提示
3. 自定义图例设置
自定义图例设置适用于需要显示而又无法在图表中显示的数据（如属性）或仅在图表图例中显示特定时序数据的情况，示例中使用不能在图表上显示的活动/非活动属性，只能在表格小部件中显示。
- 单击高级选项卡中启用自定义图例
- 单击数据选项卡输入数据密钥配置
- 输入模式 ${}并在括号内输入数据键名称
- 单击应用更改
- 单击保存更改
时序折线图
时间序列折线图部件的高级设置与时间序列条形图相同可以在上面了解这些设置。
1. 曲线平滑
- 单击高级选项卡中启用平滑线条
- 单击保存更改
2. 阈值线宽
- 单击数据选项卡数据键铅笔图标配置
- 输入阈值选择阈值颜色单击保存
- 单击应用更改
- 在高级选项卡中输入阈值的线宽
- 单击保存更改
状态图
1. 通用设置
1.1. 堆叠
堆叠模式适用法需要查看实体值部件。
1.2. 曲线平滑
曲线平滑仅适用于折线图。
1.3. 悬停显示
选中悬停单个点框后将不会在行上看到数据。
1.4. 堆叠模式下的累积值
当堆叠模式处于打开状态时可以选中“累积值”框，以使用图表能够显示所有实体值的总和。
1.5. 工具提示值格式功能f(value)
可以通过设置或高级数据密钥配置自定义将在工具提示中显示的值，通过设置进行的工具提示配置是基本的可同时应用于所有实体，在高级数据密钥配置中配置时仅适用于特定的时序数据，基本工具提示功能将被此配置覆盖。
在状态图中可以根据实体值配置要在工具提示上显示的实体状态。
1
2
3
let celsiusValue = parseFloat(value).toFixed(2);
let farenheitValue = parseFloat(celsiusValue*1.8 + 32).toFixed(2);
return celsiusValue + ' °C (' + farenheitValue + ' °F)';
- 在高级选项卡中输入提示函数并应用更改
- 单击保存更改
- 鼠标悬停在部件查看提示
1.6. 网格设置
网格设置与时序条形图中的设置相同。
1.7. 坐标设置
坐标设置与时序条形图中的设置相同。
1.8. 格式化函数
- 在高级选项卡中根据实体值编辑默认函数
- 输入内容单击应用更改
- 单击保存更改
2. 比较设置
- 单击高级选项卡中启用比较
- 选择历史时间窗口单击更新
- 单击保存更改
3. 自定义图例设置
自定义图例设置与时序条形图中相同。
最新值-饼状图
1. 半径
设置饼图的半径该值介于 0 和 1（含）之间作为可用空间（容器大小）的百分比否则使用该值作为直接像素长度。
- 单击高级选项卡输入半径单击应用更改
- 单击保存更改
2. 内径
设置饼图的内径该值介于 0 和 1（含）之间作为可用空间（容器大小）的百分比否则使用该值作为直接像素长度。
- 单击高级选项卡输入内径单击应用更改
- 单击保存更改
3. 动画
动画使显示数据更流畅、更柔和。
- 单击高级选项卡启用动画单击应用更改
4. 倾斜
倾斜百分比范围从0到1其中1没有变化（完全垂直）0完全平坦（完全水平不会绘制任何内容），在计算饼图相对于容器高度的最大半径时将使用倾斜值。在某些情况下这应该可以防止饼图小于所需的值并减少饼图上方和下方生成的额外空白量。
- 单击高级选项卡输入倾斜度单击应用更改
- 单击保存更改
5. 描边
- 单击高级选项卡设置描边单击应用更改.
- 单击应用更改
- 单击保存更改
最新值-环形图
1. 边框
- 单击高级选项卡设置描边单击应用更改
- 单击应用更改
- 单击保存更改
2. 图例
- 在高级选项卡中单击标签字体颜色圆圈打开对话框中移动滑块调整颜色然后单击选择
- 单击应用更改
- 单击保存更改
