PythonのPlotly Expressのグラフをhtml出力してWordPressで表示させる方法

Python

Plotly Expressで作成したグラフをhtml出力してWordPressで表示させる方法を紹介します。

htmlで出力することで他の人に共有しやすくなるので、ぜひ活用してください。

【世界で5万人が受講】実践 Python データサイエンス・オンライン講座

  • こんな感じのものが作成できます。

手順1:Plotly(plotly.express) でグラフを生成する

使用データ

  • 下記のデータを使用します。(データはどんなものでも構いません。)

サンプルコード

  1. ライブラリをimportする
  2. csvファイルを読み込んでデータフレームにする
  3. 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)

よくわかるRuby on Rails入門 オンライン講座

手順3:WordPressのカスタムHTMLで表示させる

  • 表示させたいWordpressの画面で、カスタムHTMLを選択します。

  • 先ほどコピーしたhtmlテキストを貼り付けます。
  • ただし、下記の赤枠内の\nは削除してください。(不要な\nが表示されてしまいます。)

  • 以下が、カスタムHTMLに出力されたhtmlを入力した結果です。(ぐりぐり動かせます。)

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース

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

コメント

タイトルとURLをコピーしました