【plotly】HTML上でのグラフ表示：グラフの作成方法とWordPressの記事への埋め込み[Python]

2022年11月15日2022年12月9日

URLをコピーしました！

plotly

今回からはHTML上でインタラクティブなグラフ描写ができるライブラリ「plotly」を使っていこうと思います。

今までJupyter Notebookを使ってきて、グラフ描写は「Matplotlib」を使ってきました。

plotlyのインストール

まずはplotlyのインストールを行います。

インストールはpipを使ってでき、こちらのコマンドを実行するだけです。

pip install plotly

データの作成

次に今回使用するデータを作成します。

import random
import pandas as pd

data_points = 100

df = pd.DataFrame()

df['x'] = [i for i in range(data_points)]
df['y'] = [random.randrange(100) for _ in range(data_points)]

df

実行結果

今回データは「randomモジュール」を使ってランダムな値のデータを作成します。

「data_points = 100」でデータ数の定義（ここでは100個）をして、リスト内包表記を使って、Xの値とYの値をPandasのデータフレームに格納しています。

df['x'] = [i for i in range(data_points)]
df['y'] = [random.randrange(100) for _ in range(data_points)]

これでデータの準備ができました。

Matplotlibを使った例

グラフ描写の比較対象として「Matplotlib」を使ってグラフを作成してみましょう。

import matplotlib.pyplot as plt

fig=plt.figure()

plt.plot(df['x'], df['y'])

plt.savefig('./test_matplotlib.png')

実行結果

「fig=plt.figure()」でグラフ描写エリアの確保、「plt.plot(df[‘x’], df[‘y’])」で折れ線グラフ（Xの値をdf[‘x’]、Yの値をdf[‘y’]）を作成、「plt.savefig(‘./test_matplotlib.png’)」でグラフ画像の保存をしています。

plotlyを使ってグラフをhtml保存

それではplotlyを使ってインタラクティブなグラフをhtmlファイルとして保存してみましょう。

import plotly

graph = plotly.graph_objects.Scatter(x=df['x'],y=df['y'])

fig = plotly.graph_objects.Figure(data=graph)

with open('./test_graph1.html', 'w') as f:
     f.write(fig.to_html())

まずplotlyを使用するためインポートしています（import plotly）。

次にデータを読み込み、グラフ化します（graph = plotly.graph_objects.Scatter(x=df[‘x’],y=df[‘y’])）。

matplotlibとは異なり、X値、Y値を入力するのに、「x=X値,y=Y値」とすることに注意してください。

（matplotlibではplt.plot(X値,Y値)と「x=」や「y=」を入力しません）

そしてグラフを図に変換します（fig = plotly.graph_objects.Figure(data=graph)）。

そして最後にファイルを保存するようにグラフデータを保存しますが、書き出すデータは「fig.to_html()」でhtml化しています。

with open('./test_graph1.html', 'w') as f:
     f.write(fig.to_html())

これでインタラクティブに操作できるグラフのhtmlファイルが出力されます。

開いてみるとこんな感じです（注：下のグラフはhtmlファイルを開いた画面をキャプチャした画像なので動きません）。

インタラクティブなグラフをWordPressに埋め込む方法

WordPressの記事に埋め込む場合はhtmlファイルを簡略化させることが必要です。

そのため「.to_html」のオプションに「full_html=False」を追加します。

その場合、通常出力されるplotlyライブラリのCDN（コンテンツデリバリーネットワーク）のURLが出力されないようなので、「include_plotlyjs=’cdn’」をオプションに追加することで、出力されるhtmlにCDNのURLを追加します。

またhtmlファイルとして出力してしまうと、出力されたファイルをダブルクリックした際、ブラウザで開いてしまい、ソースへのアクセスがめんどくさくなります。

そのため出力ファイルの拡張子を「.txt」としてテキストファイルとして出力すると便利です。

ということでこんな感じです。

import plotly

graph = plotly.graph_objects.Scatter(x=df['x'],y=df['y'])

fig = plotly.graph_objects.Figure(data=graph)

with open('./test_graph2.txt', 'w') as f:
     f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))

これで出力されたファイルをダブルクリックで開き、内容を全選択＋コピーします。

その後、WordPressの記事作成画面で「カスタムHTML」を選択し、コピーした内容を貼り付けます。

これでWordPressでもインタラクティブなグラフを表示できるようになりました。

次回はplotlyで出力できるグラフの種類を見てみましょう。