Bubble.ioでHTMLタグを利用する

Bubble.ioでHTMLタグを利用したときの個人メモ

---

API Connectorの準備

• チャートに表示するデータをAPIを利用して取得する

インストール

• API ConnectorのインストールはBubble.ioでAPI Connectorを利用すると同様

設定

• 設定はBubble.ioでChart Elementを利用すると同様

HTMLの準備

• ApexCharts.jsを利用する
• 「Edit on CodePen」を押下
• 今回利用するHTMLとJSは以下
  

画面実装

• 完成イメージ
  

Group

• APIを紐づけるGroupを作成
  

HTML

• Group上にHTMLを記述できるようにする
  

• HTMLを転記
  

• scriptタグ内にJSを転記
  

• データを固定値から変数に置き換える
  

動作確認

• 画面描画時にAPIを実行し、チャートを表示する
  

補足

• ApexCharts.jsであれば、JSだけ置き換えれば他グラフも利用可能

Mixed Charts

• Line Columnを利用する
• 固定値を変数に置き換える
  • X軸はdatetimeからtextに変更

動作確認

• 画面描画時にAPIを実行し、チャートを表示する
  

感想

• 描画はできたが、X軸が日付にならなかった
• HTMLを利用することで表現の幅は広がるものの開発スピードは落ちそう
• サイズなど、Bubble or HTMLのどちらで定義するかがあいまいでわかりづらい（どちらでも定義できる）