使用 Infinity 可视化 HTML

使用 Infinity 数据源插件可视化 HTML 页面中的数据

📊 概述

注意
HTML 查询类型仅应用于从没有替代 API 的遗留系统中检索数据。我们强烈建议使用其他查询类型，如 JSON、CSV、XML，而不是 HTML 查询类型。

在以下示例中，您将从一个示例 HTML 页面中检索数据。

在查询编辑器中，填写以下查询详细信息

选择 HTML 作为查询类型。
选择 Default（前端）作为解析器。
选择 URL 作为来源。
选择 GET 作为 HTTP 方法。
在查询的 URL 字段中输入 https://github.com/grafana/grafana-infinity-datasource/blob/main/testdata/users.html。

完成初始设置后，您需要配置选择器

在根选择器中，您需要提供一个选择器，它将返回对称元素的数组。（这可能是表格中的行或具有对称结构的重复 div 元素）。在本例中，我们将 table:nth-child(1) tbody tr（CSS 选择器）作为我们的根选择器。或者，如果您的 HTML 内容只有一个表格，您可以将 tr 作为选择器。此外，如果表格有任何独特的选择器（如 ID），请改用该选择器。
根据我们的 HTML 结构，我们知道每一行包含多个 div 元素，每个 div 代表用户的一个属性，因此我们需要唯一标识与用户属性对应的 div 元素。
添加一列，并在选择器字段中输入 td:nth-child(1)。同时在 别名/作为 字段中将其标记为 Name。我们可以将其保留为字符串类型。
再添加一列，并在选择器字段中输入 td:nth-child(2)。同时在 别名/作为 字段中将其标记为 Age。我们知道这是一个数字，所以可以将字段类型更改为数字。
再添加一列，并在选择器字段中输入 td:nth-child(3)。同时在 别名/作为 字段中将其标记为 Country。
根据需要添加其他列。

上述查询的示例可在 play.grafana 网站找到，供参考。

只能查询对称数据。（例如：带有 colspan 或 rowspan 的 table 将导致抓取失败）
我们仅支持文本元素查询。不支持检索其他 HTML 属性。
如果您希望对 HTML 查询类型使用后端解析器，请注意后端 HTML 查询解析器是实验性的，可能会发生重大更改。此外，只有与 XML 语法兼容的 HTML 页面才能用于 HTML 后端查询类型。
如果抓取频率/刷新率很高，网站可能会屏蔽您或您的 IP 地址。请合理负责地设置您的刷新限制。
尚未实现缓存，因此请注意速率限制。