Grafanaのグラフをhtml文書に埋め込む

3943 ワード
grafana grafana テキストリンク

前回記事のおまけ。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;
}

埋め込み結果

ハートの真ん中で脈打っているのが埋め込んだグラフ。