Canvas 图表 - 从 Grafana 检索数据

Question

我正在使用 Grafana 监控数据，它向我显示 HTML5 Canvas 元素中的图表。我想知道我是否可以通过 JavaScript?

以某种方式访问这些数据

我知道 Canvas 是一个 Graphic 对象，但由于我可以与图形交互，将鼠标悬停在特定点上并获取更多数据，我认为它一定有可能以某种方式获取此数据。

不幸的是，我找不到任何方法。有谁知道你是否可以以及如何做到这一点？

我查了Canvas元素的方法，也上网查了

提前致谢！

干杯

Answer 1

The canvas itself just holds the image, think of it as something that can be "painted". It holds no information about that image. To get data associated to your graph you will need to figure out what is doing the drawing and where it gets the data to do so.

谢谢@IrkenInvader

Answer 2

canvas 元素本质上是一个您可以在其上作画的白板。这意味着它用于一些奇妙的 UI 和数据表示，例如您引用的图表。这也意味着除了当前图像（在所有常用的 canvas 函数中实际绘制等）之外，您看不到任何关于 canvas 的逻辑。

要找到您需要的数据，您需要查看与其捆绑的 JS。但是，如果数据来自像 Grafana 这样的服务，那么它可能会附带一个 API。幸运的是，您应该能够通过使用他们的 API.

来获取您想要的数据

请求示例：

GET /api/datasources/1 HTTP/1.1
Accept: application/json
Content-Type: application/json
Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk

示例响应：

HTTP/1.1 200
Content-Type: application/json

{
  "id":1,
  "orgId":1,
  "name":"test_datasource",
  "type":"graphite",
  "access":"proxy",
  "url":"http://mydatasource.com",
  "password":"",
  "user":"",
  "database":"",
  "basicAuth":false,
  "basicAuthUser":"",
  "basicAuthPassword":"",
  "isDefault":false,
  "jsonData":null
}

在 http://docs.grafana.org/reference/http_api/#get-a-single-data-sources-by-id

阅读更多内容

Answer 3

您可以将图表数据导出到 csv 或 json 文件，只需单击图表标题，然后单击汉堡菜单，然后导出

Canvas 图表 - 从 Grafana 检索数据

Canvas Graph - Retrieve the data from Grafana

html

javascript

canvas

grafana