Plotly Expressで作成したグラフをhtml出力してWordPressで表示させる方法を紹介します。
htmlで出力することで他の人に共有しやすくなるので、ぜひ活用してください。
【世界で5万人が受講】実践 Python データサイエンス・オンライン講座
- こんな感じのものが作成できます。
手順1:Plotly(plotly.express) でグラフを生成する
使用データ
- 下記のデータを使用します。（データはどんなものでも構いません。）
サンプルコード
- ライブラリをimportする
- csvファイルを読み込んでデータフレームにする
- px.barで棒グラフをfigに格納する
# ライブラリのimport
import pandas as pd
import plotly.express as px
#csvファイルの読み込み
df = pd.read_csv('./sample.csv',encoding='shift-jis',index_col=[0],parse_dates=[0])
# データフレームを1日毎のデータにリサンプリングする
df_m = df.resample('M').mean()
# plotly.expressで箱ひげ図の描画
# 今回は、x='電力量',y='月'としました
fig = px.bar(data_frame=df_m,x=df_m.index,y='電力量',labels={'電力量':'EPOWER[kW]'},title='example')
- 各グラフの書き方は下記を参考にしてください。
手順2:Plotly(to_html)でhtmlを生成する
- 下記のソースコードを実行することにより、htmlの必要な部分をテキストで出力することができます。
- 出力されたテキストをコピーします。
fig.to_html(include_plotlyjs='cdn',full_html=False)
手順3:WordPressのカスタムHTMLで表示させる
- 表示させたいWordpressの画面で、カスタムHTMLを選択します。
- 先ほどコピーしたhtmlテキストを貼り付けます。
- ただし、下記の赤枠内の\nは削除してください。（不要な\nが表示されてしまいます。）
- 以下が、カスタムHTMLに出力されたhtmlを入力した結果です。（ぐりぐり動かせます。）
【Web開発初心者向け！】Web開発入門完全攻略 充実の18時間コース
インタラクティブなグラフを見せることで、より印象に残るグラフを作成することができました。
コメント