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時間コース

インタラクティブなグラフを見せることで、より印象に残るグラフを作成することができました。
コメント