前回記事のおまけ。Grafanaのグラフをhtml文書に埋め込む。
Grafanaでanonymousログイン、embeddingを有効にする
１．viで「/etc/grafana/grafana.ini」を編集する。
→ 205行目くらいにある「;allow_embedding = false」を
「allow_embedding = true」に、
→ 336行目くらいにある、[auth.anonymous]セクションの「;enabled = false」を「enabled = true」に
２．Grafanaを再起動する。
GrafanaのパネルのURLを取得する
１．Grafanaにadminユーザーでログインする。
２．埋め込みたいダッシュボード/パネルを開く。
３．パネルのタイトルをクリックし、「Share」をクリックする。
※下記の画像だと、パネルのタイトルは空文字。
４．「Embed」で「Current time range」のチェックを外し、表示される「<iframe～」の文字列をコピーする。
グラフを埋め込んだhtmlを作成する
１．とりあえず、グラフを画像内に埋め込んだhtmlの例として、以下ファイルを作成して手元のPCに保存する。
iframeのwidthやheightは埋め込む先の画像に合わせて調整。
graf.html
<!DOCTYPE html>
<head><link rel="stylesheet" href="graf.css"></head>
<div class="relative">
<div class="absolute">
<iframe src="http://54.150.214.19:3000/d-solo/Dnrs741Mz/data1?orgId=1&refresh=1s&theme=dark&panelId=2" width="100" height="100" frameborder="0"></iframe>
</div>
</div>
graf.css
.relative {
position: relative;
width: 409px;
height: 700px;
background-image: url("https://publicdomainq.net/images/202008/10s/publicdomainq-0047735ngo.jpg");
}
.absolute {
position: absolute;
top: 490px;
left: 155px;
}
埋め込み結果
ハートの真ん中で脈打っているのが埋め込んだグラフ。
