2016-04-13 13 views
1

Ich überwache Daten mit Grafana und es zeigt mir die Graphen in einem HTML5 Canvas Element. Ich frage mich, ob ich irgendwie auf diese Daten mit JavaScript zugreifen kann?Canvas Graph - Abrufen der Daten von Grafana

Ich verstehe, dass Canvas ein Grafikobjekt ist, aber da ich mit dem Graphen interagieren kann, schwebe über einen bestimmten Punkt und bekomme mehr Daten, ich nehme an, es muss irgendwie möglich sein, diese Daten zu bekommen.

Interaction example

Leider finde ich konnte keine Art und Weise, dies zu tun. Weiß jemand, ob und wie Sie es tun können?

Ich überprüfte die Methoden des Elements Canvas und überprüfte auch das Internet.

Vielen Dank im Voraus!

Prost

+1

Das Segeltuch selbst hält gerade das Bild, thi nk davon als etwas, das "gemalt" werden kann. Es enthält keine Informationen über dieses Bild. Um Daten mit Ihrem Graphen in Verbindung zu bringen, müssen Sie herausfinden, was die Zeichnung macht und wo sie die Daten erhält. – IrkenInvader

+0

Macht Sinn, und jetzt verstehe ich auch, warum Canvas die Daten nicht zurückgeben kann. Sollte von AngularJS sein, wird dies überprüfen Vielen Dank! – the0MIKE

Antwort

1

Das Canvas-Element ist im Wesentlichen ein Whiteboard, das Sie malen auf kann. Dies bedeutet, dass es für einige fantastische UI- und Datendarstellungen wie das Diagramm verwendet wird, auf das Sie verwiesen haben. Es bedeutet auch, dass Sie nichts anderes als das aktuelle Bild (unter allen üblichen Canvas-Funktionen zum Zeichnen usw.) sehen können.

Um die Daten zu finden, die Sie benötigen, müssen Sie sich das JS ansehen, das mit dem Paket enthalten ist. Wenn die Daten jedoch von einem Service wie Grafana stammen, ist wahrscheinlich eine begleitende API vorhanden. Glücklicherweise sollten Sie in der Lage sein, die gewünschten Daten mithilfe ihrer API zu erfassen.

Beispiel Anfrage:

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

Beispiel Antwort:

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 
} 

Lesen Sie mehr bei http://docs.grafana.org/reference/http_api/#get-a-single-data-sources-by-id

0

Die Leinwand selbst hält nur das Bild, betrachten Sie es als etwas, das „gemalt“ werden kann. Es enthält keine Informationen über dieses Bild. Um Daten mit Ihrem Graphen in Verbindung zu bringen, müssen Sie herausfinden, was die Zeichnung macht und wo sie die Daten erhält.

Danke @IrkenInvader

0

Sie die grafische Darstellung von Daten in CSV oder JSON-Datei exportieren können, klicken Sie einfach auf den Diagrammtitel, dann das Hamburgermenü, dann Export

Verwandte Themen