图表小部件

概述

本指南将研究图表小部件：它们的功能、特性、小部件的基本和高级设置以及小部件的数据键。

图表小部件允许您使用可自定义的折线图和条形图显示时间序列数据。此外，您可以使用各种饼图来显示最新值。

如何创建图表小部件

要将任何图表小部件添加到仪表板，您应该：

单击屏幕右下角的铅笔图标进入编辑模式。
要添加小部件，请单击屏幕中央的“添加新小部件”标志，或者单击加号图标并选择“创建新小部件”打开下拉菜单。
从小部件包中，选择图表。
从图表包中选择首选小部件。
在“添加小部件”对话框中，单击“添加”按钮添加数据源。
添加实体别名和实体时间序列，然后单击“添加”。
仍处于编辑模式时，拖动小部件角以调整其大小。之后，单击橙色复选标记以保存所有应用的更改。
现在您的仪表板上有了图表小部件。

图表小部件类型

图表小部件分为时间序列和最新值小部件。时间序列小部件对于可视化时间序列数据随时间的变化非常有用。当您需要查看多个实体的最新属性值或时间序列数据时，将使用最新值小部件。

时间序列小部件

时间序列小部件可视化时间序列数据随时间的变化。

条形图

条形图小部件显示时间序列数据随时间的变化。该示例显示了温度读数。

折线图

折线图小部件显示时间序列数据随时间的变化。该示例显示温度和湿度读数。

状态图

状态图小部件显示实体状态随时间的变化。例如，如果设备打开和关闭，其状态和条件。

图表小部件设置

基本小部件设置

基本小部件设置负责小部件的外观和样式：从标题样式和图例配置到移动设备的设置。所有 YiCONNECT 小部件都具有相同的基本设置。

高级小部件设置

不同的小部件类型的高级小部件设置有所不同。高级设置负责配置特定小部件的独特功能。要进入小部件编辑模式并开始配置其高级设置，请首先进入仪表板编辑模式。那么，你应该：

单击小部件右上角的铅笔图标即可进入小部件编辑模式。
单击第三个选项卡“高级”。

时间序列条形图

1. 常用设置

1.1. 堆叠

如果数据聚合功能未设置为“无”，则使用此功能。如果选中“堆叠”框，则该条将根据所使用的实体的值进行分割。如果未选中此框，小部件将显示所用实体值的总和。要查看所有实体的值，您需要将鼠标悬停在栏上。

在屏幕右上角，单击时间窗口配置，然后选择除“无”之外的任何首选数据聚合功能。单击“更新”以应用更改。
单击屏幕右上角的铅笔图标即可进入小部件编辑模式。
在“高级”选项卡中，禁用“堆叠”框并通过单击窗口右上角的橙色复选标记应用更改。
应用更改后，单击屏幕下角的橙色复选标记以保存它们。
将鼠标悬停在条上可查看所有实体的值。

如果您的数据未聚合，您可以通过更改数字来调整 非聚合数据的默认条形宽度（毫秒）。 此操作使图表的条形变宽。

条形对齐负责图表小部件上条形相对于时间点的放置。

所有阈值的默认线宽 、 阴影大小 、字体颜色和大小适用于时间序列折线图和状态图小部件。

工具提示值格式函数， 当您想要手动自定义工具提示时使用 f(value)。您可以通过“设置”或 “高级数据”键配置自定义将在工具提示中显示的值。通过设置进行的工具提示配置是基本的，并且同时应用于所有实体。在高级数据键配置中配置时，仅适用于特定时间序列数据，基本工具提示功能将被该配置覆盖。

但是，如果您需要为您的小部件提供一些非常特别的东西，则工具提示值格式功能非常适合您。假设您有温度读数，并且希望在小部件上查看摄氏度和华氏度值，这些值将以两个浮点显示。

输入自定义工具提示值格式函数并通过单击窗口右上角的橙色复选标记应用更改。
要查看工具提示，您需要通过单击屏幕下角的橙色复选标记来保存应用的更改。
将鼠标悬停在小部件上可查看具有应用的工具提示值格式功能的工具提示。

1.2. 网格设置

您可以更改图表网格的外观：自定义背景颜色、网格框架及其刻度；更改线条的宽度并关闭其可见性。

在“高级”选项卡中，转到“网格”设置，然后单击“原色环”图标。在打开的对话框中，移动滑块来调整颜色和透明度。完成后单击“选择”以应用更改。
配置首选网格设置并通过单击窗口右上角的橙色复选标记应用更改。
这组应用的颜色只是一个示例。要保存应用的更改，请单击屏幕下角的橙色复选标记。

1.3. 轴设置

配置首选轴设置，然后单击窗口右上角的橙色复选标记以应用更改。
如您所见，已添加标题，已更改轴的颜色，并根据应用的更改调整了值。要保存这些更改，请单击屏幕下角的橙色复选标记。

1.4. 刻度格式化函数，f(值)

假设我们有遥测数据，它需要非常大的数字值，特别是当值附近有特殊符号时。但是，我们需要构建一个小图表（因为仪表板上没有很多可用空间）。因此，使用ticks-formatter函数，我们可以将ticks值转换为更紧凑的形式。

单击小部件右上角的铅笔图标进入小部件编辑模式。
在“高级”选项卡的“刻度格式化程序函数”字段中，输入自定义函数并通过单击窗口右上角的复选标记应用更改。
函数已被应用，值变得更加紧凑。单击屏幕右下角的复选标记保存更改。
通过将鼠标悬停在小部件上，您可以看到未减少值的工具提示。

2. 比较设置

比较设置允许您比较特定时间段内的值差异。仅适用于历史时间窗口。

由于比较设置仅在历史时间窗口模式下有效，因此单击右上角的时钟图标并选择其中的历史时间窗口。单击“更新”以应用。
在“高级”选项卡中，启用比较，然后从下拉菜单中选择时间以显示要比较的历史数据。在“第二个 X 轴”部分中，选择轴位置，比较轴将位于小部件上。如果您想要第二个轴的标题，请启用“显示标签”并输入轴标题。完成比较设置配置后，单击窗口右上角的橙色复选标记以应用更改。
您可以在小部件图例中看到已应用比较设置。单击屏幕右下角的橙色复选标记保存更改。
将鼠标悬停在小部件上时，您可以看到带有比较数据的工具提示。

3. 自定义图例设置

自定义图例设置适用于需要显示图表中无法显示的数据（例如属性）或仅在图表图例中显示特定时间序列的情况。对于示例，我们使用无法在图表上显示、只能在表格小部件中显示的活动/非活动属性。

在“高级”选项卡中，启用自定义图例以在关键标签中使用属性或时间序列值。单击“+新建”按钮。从出现的下拉菜单中选择密钥类型。密钥名称在下面的行中输入。单击窗口右上角的橙色复选标记应用所有配置的设置。
转到“数据”选项卡，然后单击数据键上的铅笔图标以进入数据键配置。
在标签行中，输入模式 ${}，并在括号内输入数据键名称。单击“保存”以应用新的标签名称。
单击屏幕右上角的橙色复选标记以应用数据密钥更改。
正如您在小部件上看到的，已应用自定义图例设置。要保存更改，请单击屏幕右下角的橙色复选标记。

时间序列折线图

时间序列折线图小组件的高级设置与时间序列条形图相同。

1.显示平滑（弯曲）的线条

在“高级”选项卡中，启用“显示平滑（曲线）线”，然后单击窗口右上角的橙色复选标记以应用更改。
正如您在小部件上看到的，线条变得平滑。单击屏幕右下角的橙色复选标记以保存更改。

2.所有阈值的默认线宽

在“数据”选项卡中，单击数据键上的铅笔图标以进入数据键配置。
在打开的对话框的“高级”选项卡中，输入首选阈值，选择阈值的颜色，然后单击“保存”。
要应用更改，请单击窗口右上角的橙色复选标记。
在“高级”选项卡中，输入所有阈值的线宽，然后单击窗口右上角的橙色复选标记应用更改。
阈值宽度已更改。单击屏幕右下角的橙色复选标记保存所有应用的更改。

状态图

1. 常用设置

1.1. 堆叠

堆叠模式适用于需要查看实体值的小部件。

1.2. 显示平滑（曲线）线仅适用于折线图。

1.3. 将鼠标悬停在各个点上

选中“悬停单个点” 框后，您将不会在线上看到值点。

1.4. 堆叠模式下的累计值

当堆叠模式打开时，您可以选中“累积值”框以使图表显示所有实体值的总和。

1.5. 工具提示值格式函数， 当您想要手动自定义工具提示时使用 f(value)。您可以通过“设置”或 “高级数据”键配置自定义将在工具提示中显示的值。通过设置进行的工具提示配置是基本的，并且同时应用于所有实体。在高级数据键配置中配置时，仅适用于特定时间序列数据，基本工具提示功能将被该配置覆盖。

在状态图中，您可以根据实体值将实体状态配置为显示在工具提示上。

let celsiusValue = parseFloat(value).toFixed(2);
let farenheitValue = parseFloat(celsiusValue*1.8 + 32).toFixed(2);
return celsiusValue + ' °C (' + farenheitValue + ' °F)';

在工具提示值格式函数字段中，输入您的函数（您可以在屏幕截图部分找到我们的示例）。单击窗口右上角的橙色复选标记应用更改。
您需要保存更改才能查看工具提示。单击屏幕右下角的橙色复选标记即可完成此操作。
将鼠标悬停在小部件上可查看带有应用值格式功能的工具提示。

1.6. 网格设置

网格设置与Timeseries Bar Chart中的相同。

1.7. 轴设置

轴设置与Timeseries Bar Chart中的相同。

1.8. 刻度格式化函数

在“高级”选项卡中，您可以根据实体值编辑默认函数。
编辑要返回的值和文本后，通过单击窗口右上角的橙色复选标记应用更改。
已应用刻度格式化程序功能。要保存它，请单击页面右下角的橙色复选标记。

2. 比较设置

在“高级”选项卡中，启用比较，然后从下拉菜单中选择时间以显示要比较的历史数据。在“第二个 X 轴”部分中，选择轴位置，比较轴将位于小部件上。如果您想要第二个轴的标题，请启用“显示标签”并输入轴标题。完成比较设置配置后，单击窗口右上角的橙色复选标记以应用更改。
由于比较设置仅在历史时间窗口模式下有效，因此单击右上角的时钟图标并选择其中的历史时间窗口。单击“更新”以应用。
正如您在小部件上看到的，现在您可以比较最后一分钟的值和前一天的值。单击右下角的大橙色复选标记以应用更改。

3. 自定义图例设置

自定义图例设置与时间序列条形图相同。

图表小部件

概述

如何创建图表小部件