时序图
这个小组件有什么功能？
“时序图”小组件专门用于 X 轴为时间的时序数据。此图仅支持线条和/或点标记渲染。
 |
数据必须与时序图绑定。
|
何时会用到这个小组件？
当您想要以连续的时间间隔展示数据点时，会用到“时序图”小组件。例如，如果您想要显示一张图表以表示前一个小时的卡车发动机转速，则可使用“时序图”小组件将已联网卡车的发动机转速属性绑定为小组件的“数据”。
这个小组件中是否有专用的属性、服务、事件或操作？
若要查看小组件常用的属性、服务和事件的列表，请参阅小组件的通用属性、服务和事件。
|
属性
|
JavaScript
|
类型
|
说明
|
|---|---|---|---|
|
X 轴字段
|
labelsField
|
string
|
显示图表 X 轴的数据。手动输入字段名称。例如，输入“Name”。
|
|
Y 轴字段
|
valuesField
|
string
|
显示图表 Y 轴的数据。手动输入字段名称。例如，输入“User”。
|
小组件的显示效果
以下是小组件的显示效果示例！
|
使用时的必要步骤
|
显示效果
|
|---|---|
|
1. 将“时序图”小组件拖放到工作区。
2. 在“数据”窗格中，搜索其服务可返回历史数据的实体。
3. 添加了服务之后，将“所有项”拖放到小组件上，然后选择“选择绑定目标”窗口中的“数据”。
4. 从“X 轴字段”下拉列表中选择一个属性。在本示例中，我们选择了“速度”。
5. 从“Y 轴字段”下拉列表中选择一个属性。在本示例中，我们选择了“RPM”。
|
 |
绑定 ThingWorx 数据后的辅助配置字段
将 ThingWorx 数据绑定到小组件之后，某些字段会被下拉列表中的选项所填充。例如，如果您将“所有项”与“时序图”小组件绑定，并选择了“选择绑定目标”窗口上的“数据”，则“X 轴字段”和“Y 轴字段”属性将被可用的选项填充。
使用 JavaScript 和 CSS 设置小组件样式
您可以使用 JavaScript 来设置小组件的样式！以下是一个示例：
 |
请注意，最好为您的类指定唯一名称，以避免与其他类或预装属性发生冲突。
|
|
示例
|
显示效果
|
|---|---|
|
在 JavaScript 编辑器中输入以下内容：
// Chart Legends |
 |
|
在 JavaScript 编辑器中输入以下内容：
1. 在 JavaScript 编辑器中输入以下内容：
// Time Series lines 2. 在应用程序编辑器中添加以下类：
.ptc-TimeSeries {
3. 在时序图的“类”字段中输入新的类。
|
 |
|
1. 在 JavaScript 编辑器中输入以下内容：
Chart.defaults.global.legend.position="bottom"; 2. 在应用程序编辑器中添加以下类：
.ptc-TimeSeries {
3. 在时序图的“类”字段中输入新的类。
|
 |
有关可更新属性的完整列表，请参阅 https://www.chartjs.org/docs/latest。
有关详细信息，请参阅在 Vuforia Studio 中使用 JavaScript和应用程序样式。