enebular の INFOMOTION を他のサイトに貼り付ける

  • 3
    いいね
  • 0
    コメント

本投稿は、enebular Advent Calendar 2016 の第8日目の記事です。

第1日目の記事や、enebular.com のチュートリアルをすすめることで、 enebular でグラフ(INFOMOTION)が表示されていると思います。

image

実は、INFOMOTION は、HTMLとして他のサイトに貼り付けることができるんです!

やりかたはとても簡単。

グラフの右肩にある「share」リンクをクリックすると、ウインドウに貼り付け用のHTMLが表示されます。

image

これを他のサイトのHTMLに埋め込むだけです!

※画像はローカルのHTMLです。

image

INFOMOTION は部品ごとに div タグになっており、コンパーチブルに埋め込むことができます。ただ、既存のサイトに埋め込むときは、スタイルの競合があるかもしれないので、そこだけ注意が必要です。

dateRangePicker

<div id="enebular-daterangepicker"></div> 

image

timeline

<div id="enebular-timeline"></div>

image

graph

<div id="enebular-graph"></div>

image

こんな感じです。それでは〜。