概述
本指南将介绍图表部件：其功能、特性、部件的基本和高级设置，以及部件的数据键。
图表部件允许您使用可自定义的折线图和柱状图显示时序数据。此外，您还可使用多种饼图显示最新值。
如何创建图表部件
要将任意图表部件添加到仪表板，请执行：
- 点击屏幕右下角的铅笔图标进入编辑模式。
- 要添加窗口，请点击屏幕中心的"添加新窗口"标志，或点击加号图标打开下拉菜单，并选择"创建新窗口"。
- 从部件包中选择图表。
- 从图表包中选择首选的窗口。
- 在"添加窗口"对话框中，点击添加按钮以添加数据源。
- 添加实体别名和实体时间序列，然后点击"添加"。
- 在编辑模式下，拖动窗口的角以调整其大小。之后，点击橙色复选标记以保存所有应用的更改。
- 现在您的仪表板上有图表窗口了。
图表部件类型
图表部件分为时序部件和最新值部件。时序部件用于可视化时序数据随时间的变化。当需要查看多个实体的最新属性值或时序数据时，使用最新值部件。
时序部件
时序部件可视化时序数据随时间的变化。此处了解如何设置时间窗口。
柱状图
柱状图部件显示时序数据随时间的变化。示例显示温度读数。
折线图
折线图部件显示时序数据随时间的变化。示例显示温度和湿度读数。
状态图
状态图部件显示实体状态随时间的变化。 例如，设备开关时其状态和条件。
最新值部件
最新值部件渲染多个实体的属性或时序数据的最新值。最新值部件主要支持数值。
雷达图
雷达图部件在雷达图中显示多个实体的最新属性或时序数据值。仅支持数值。
示例中，部件显示三个设备的最新压力时序数据。
极区图
极区图部件在极区图中显示多个实体的最新属性或时序数据值。仅支持数值。
示例中，部件显示三个设备的最新压力时序数据。
饼图 - Chart.js
饼图 - Chart.js部件在饼图中显示多个实体的最新属性或时序数据值。仅支持数值。
示例中，部件显示三个设备的最新温度时序数据值。
饼图 - Flot
饼图 - Flot部件在饼图中显示多个实体的最新属性或时序数据值。 仅支持数值。
示例中，部件显示三个设备的最新压力时序数据值。
环形图
环形图部件在环形图中显示多个实体的最新属性或时序数据值。 仅支持数值。
示例中，部件显示三个设备的最新湿度时序数据值。
条形图
条形图部件以独立条形显示多个实体的属性或时序数据的最新值。 是唯一不仅支持数值的最新值图表部件。
示例中，部件显示三个设备的最新压力时序数据值。
图表部件设置
基本部件设置
基本部件设置负责部件的外观和样式：从标题样式和图例配置到移动设备设置。 ThingsBoard所有部件的基本设置相同，此处了解如何自定义。
高级部件设置
不同部件类型的高级设置各不相同。高级设置负责配置特定部件的独特功能。 要进入部件编辑模式并开始配置其高级设置，请先进入仪表板编辑模式。然后执行：
- 点击窗口右角的铅笔图标进入窗口编辑模式。
- 点击第三个标签页"高级"。
时序柱状图
1. 常用设置
1.1. 堆叠
若数据聚合函数未设为None，可使用此功能。 若勾选“堆叠”框，柱形将根据所用实体的值进行拆分。 若不勾选，部件将显示所用实体值的总和。要查看所有实体的值，需将鼠标悬停在柱形上。
- 在屏幕右上角，点击时间窗口配置，并选择任何首选的数据聚合函数，除了"无"。点击"更新"以应用更改。
- 通过点击屏幕右上角的铅笔图标进入窗口编辑模式。
- 在"高级"标签页中，禁用堆叠框，并通过点击窗口右上角的橙色复选标记应用更改。
- 应用更改后，点击屏幕下角的橙色复选标记以保存它们。
- 将鼠标悬停在柱状图上以查看所有实体的值。
若数据未聚合，可通过更改数值调整非聚合数据的默认柱宽（毫秒）。此操作使图表柱形更宽。
柱形对齐负责柱形在图表部件上相对于时间点的位置。
所有阈值的默认线宽、阴影大小、字体颜色和大小适用于时序折线图和状态图部件。
Tooltip值格式函数f(value) 用于手动自定义tooltip。可通过设置或 高级数据键配置自定义将在tooltip中显示的值。 通过设置配置tooltip为基础配置，同时应用于所有实体。在高级数据键配置中配置时， 仅应用于特定时序数据，基础tooltip函数将被子配置覆盖。
但若部件需要特殊效果，可使用Tooltip值格式函数。 假设有温度读数，希望在部件上看到摄氏和华氏值，并以两位小数显示。
- 输入自定义的提示值格式函数，并通过点击窗口右上角的橙色复选标记应用更改。
- 要查看提示，您需要通过点击屏幕下角的橙色复选标记保存应用的更改。
- 将鼠标悬停在窗口上以查看应用了提示值格式函数的提示。
1.2. 网格设置
可更改图表网格的外观：自定义背景颜色、网格边框及其刻度；更改线条宽度及开启/关闭可见性。
- 在"高级"标签页中，转到网格设置并点击主色圆形图标。在打开的对话框中，拖动滑块以调整颜色和透明度。完成后，点击"选择"以应用更改。
- 配置首选的网格设置，并通过点击窗口右上角的橙色复选标记应用更改。
- 此应用色彩设置仅为示例。要保存应用的更改，点击屏幕下角的橙色复选标记。
1.3. 坐标轴设置
- 配置首选的轴设置，并点击窗口右上角的橙色复选标记以应用更改。
- 如您所见，已添加标题，轴颜色已更改，值已根据应用的更改进行调整。要保存这些更改，点击屏幕下角的橙色复选标记。
1.4. 刻度格式化函数f(value)
假设遥测值非常大，尤其数值旁有特殊符号时。然而需要绘制小图（仪表板上空间有限）。 因此，可使用刻度格式化函数将刻度值转换为更紧凑的形式。
- 通过点击窗口右角的铅笔图标进入窗口编辑模式。
- 在"高级"标签页的刻度格式化函数字段中，输入自定义函数，并通过点击窗口右上角的复选标记应用更改。
- 函数已应用，值变得更紧凑。通过点击屏幕右下角的复选标记保存更改。
- 通过将鼠标悬停在窗口上，您可以看到包含未缩减值的提示。
2. 对比设置
对比设置允许比较特定时间段内的值差异。仅在历史时间窗口中有效。
- 由于对比设置仅在历史时间窗口模式下有效，请点击右上角的时钟图标，并在那里选择历史时间窗口。点击"更新"以应用。
- 在"高级"标签页中，启用对比，并从下拉菜单中选择时间以显示要与其进行对比的历史数据。在"第二个X轴"部分，选择轴位置，即对比轴将位于窗口上的位置。如果您想要第二个轴的标题，请启用"显示标签"并输入轴标题。完成对比设置配置后，点击窗口右上角的橙色复选标记以应用更改。
- 您可以在窗口图例中看到已应用了对比设置。通过点击屏幕右下角的橙色复选标记保存更改。
- 当您将鼠标悬停在窗口上时，您可以看到包含对比数据的提示。
3. 自定义图例设置
自定义图例设置用于在图表图例中显示无法在图表中显示的数据（如属性）或仅显示特定时序。例如，active/inactive属性无法在图表中显示，只能在表格部件中显示。
- 在"高级"标签页中，启用自定义图例以在关键标签中使用属性或时间序列值。点击"+ 新建"按钮。从显示的下拉菜单中，选择关键类型。关键名称在下面的行中输入。通过点击窗口右上角的橙色复选标记应用所有配置的设置。
- 转到数据标签页，并点击数据键上的铅笔图标以进入数据键配置。
- 在标签行中，输入模式${}并在括号内输入数据键名称。点击"保存"以应用新标签名称。
- 点击屏幕右上角的橙色复选标记以应用数据键更改。
- 如您所见，在窗口上已应用了自定义图例设置。要保存更改，点击屏幕右下角的橙色复选标记。
时序折线图
_时序折线图_部件的高级设置与时序柱状图相同。可在此上文了解这些设置。
1. 显示平滑（曲线）线
- 在"高级"标签页中，启用"显示平滑（曲线）线条"，并点击窗口右上角的橙色复选标记以应用更改。
- 如您所见，窗口上的线条已变为平滑。点击屏幕右下角的橙色复选标记以保存更改。
2. 所有阈值的默认线宽
- 在数据标签页中，点击数据键上的铅笔图标以进入数据键配置。
- 在打开的对话框的"高级"标签页中，输入首选的阈值，选择阈值的颜色并点击"保存"。
- 要应用更改，请点击窗口右上角的橙色复选标记。
- 在"高级"标签页中，为所有阈值输入线宽，并通过点击窗口右上角的橙色复选标记应用更改。
- 阈值宽度已更改。通过点击屏幕右下角的橙色复选标记保存所有应用的更改。
状态图
1. 常用设置
1.1. 堆叠
堆叠模式适用于需要查看实体值的部件。
1.2. 显示平滑（曲线）线仅适用于折线图。
1.3. 悬停单个点
勾选悬停单个点框时，线条上不会显示数值点。
1.4. 堆叠模式中的累积值
堆叠模式开启时，可勾选“累积值”框使图表显示所有实体值的总和。
1.5. Tooltip值格式函数f(value) 用于手动自定义tooltip。可通过设置或 高级数据键配置自定义将在tooltip中显示的值。 通过设置配置tooltip为基础配置，同时应用于所有实体。在高级数据键配置中配置时， 仅应用于特定时序数据，基础tooltip函数将被子配置覆盖。
在状态图中，可根据实体值配置在tooltip中显示的实体状态。
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. 对比设置
- 在"高级"标签页中，启用对比，并从下拉菜单中选择时间以显示要与其进行对比的历史数据。在"第二个X轴"部分，选择轴位置，即对比轴将位于窗口上的位置。如果您想要第二个轴的标题，请启用"显示标签"并输入轴标题。完成对比设置配置后，点击窗口右上角的橙色复选标记以应用更改。
- 由于对比设置仅在历史时间窗口模式下有效，请点击右上角的时钟图标，并在那里选择历史时间窗口。点击"更新"以应用。
- 如您所见，现在您可以对比上一分钟和一天前的值。点击右下角的大橙色复选标记以应用更改。
3. 自定义图例设置
自定义图例设置与时序柱状图相同。
最新值饼图 - Flot
1. 半径
设置饼图的半径。若值在0到1（含）之间，则按可用空间（容器大小）的百分比使用。否则将直接以像素长度使用该值。
- 在"高级"标签页中，输入首选的半径（0到1），并点击窗口右上角的橙色复选标记以应用更改。
- 半径变小了。点击右下角的大橙色复选标记以应用更改。
2. 内半径
设置环形孔半径。若值在0到1（含）之间，则按半径的百分比使用。否则将直接以像素长度使用该值。
- 在"高级"标签页中，输入首选的内半径（0到1），并点击窗口右上角的橙色复选标记以应用更改。
- 内半径已添加。点击右下角的大橙色复选标记以应用更改。
3. 启用饼图动画
实体值变化时饼图 - Flot会移动，但移动较生硬。饼图动画可使移动更平滑柔和。
- 在"高级"标签页中，启用实验性饼图动画函数，并点击窗口右上角的大橙色复选标记以应用更改。
4. 倾斜
倾斜百分比范围0到1，1表示无变化（完全垂直），0表示完全平坦（完全水平，此时不绘制任何内容）。 倾斜值现用于计算饼图相对于容器高度的最大半径。 可防止饼图在某些情况下过小，并减少饼图上下方产生的额外空白。
- 在"高级"标签页中，输入首选的倾斜度（0到1），并点击窗口右上角的橙色复选标记以应用更改。
- 如您所见，饼图已被倾斜。通过点击页面右下角的大橙色复选标记保存更改。
5. 描边
- 在"高级"标签页中，点击描边颜色圆形。在打开的对话框中，拖动滑块以调整描边的颜色和透明度。完成后，点击"选择"。
- 另外，您可以更改描边宽度并禁用标签可见性。通过点击页面右上角的橙色复选标记应用更改。
- 如您所见，描边已添加到饼图中。
最新值环形图
1. 边框
- 在"高级"标签页中，点击边框颜色圆形。在打开的对话框中，拖动滑块以调整颜色，然后点击"选择"。
- 另外，您可以更改边框宽度。配置完所有首选的边框设置后，点击窗口右上角的橙色复选标记。
- 如您所见，自定义边框已添加到甜甜圈窗口。
2. 图例设置
- 在"高级"标签页中，点击标签字体颜色圆形。在打开的对话框中，拖动滑块以调整颜色，然后点击"选择"。
- 另外，您可以禁用图例可见性。完成图例设置配置后，点击窗口右上角的橙色复选标记以应用更改。
- 如您所见，标签字体的颜色已更改。
