したがって、特定の Plotly の図を HTML 文字列に変換する必要があることは驚くことではありません。
このチュートリアルでは、Plotly io モジュールを使用して Figure を HTML 文字列表現に変換する方法を学びます。
飛び込みましょう。
Plotly.io.to_html() 関数
Plotly の io モジュールの to_html() 関数を使用すると、特定の図をパラメーターとして渡し、それを HTML 文字列に変換できます。
関数の構文は次のように表されます。
陰謀的に。 これ . to_html ( 図 、 構成 = なし 、 自動再生 = 真実 、 include_plotlyjs = 真実 、 include_mathjax = 間違い 、 post_script = なし 、 full_html = 真実 、 animation_opts = なし 、 デフォルト幅 = 「100%」 、 デフォルトの高さ = 「100%」 、 検証 = 真実 、 div_id = なし )
以下の関数パラメーターを調べてみましょう。
- Fig – Figure オブジェクトまたは Figure の辞書表現を参照します。
- Config – plotly.js 構成オプションを指定します。設定オプションをディクショナリとして渡します。
- Auto_play – ページの読み込み時にアニメーション シーケンスを自動的に再生するかどうかを決定します。このパラメーターは、アニメーション フレームを含む Figure がある場合に役立ちます。
- Include_plotlyjs – このパラメーターは、plotly.js ライブラリを HTML に含める方法を指定します。このパラメーターで受け入れられる値は次のとおりです。
- True – plotly.js ライブラリをスクリプト タグとして HTML ドキュメントに含めます。これにより、ファイル サイズが大きくなりますが、ファイルをオフライン環境で使用できるようになります。
- 「cdn」 – include_plotlyjs パラメーターを「cdn」に設定すると、plotly.js ライブラリのリモート リンクを指すスクリプト タグが追加されます。このオプションは、ネットワーク環境またはファイル サイズに敏感な環境で使用します。
- 「ディレクトリ」 – HTML ドキュメントと同じディレクトリにある外部の plotly.min.js バンドルを指すスクリプト タグが含まれています。
- 「require」 – 値を require に設定すると、require.js を使用して plotly.js ライブラリが読み込まれます。 require.js がインストールされ、システム上でグローバルに使用できることを確認してください。
- 「False」 – plotly.js ライブラリは含まれません。 full_html パラメーターを True に設定する場合、この値は避けてください。ドキュメント全体がレンダリングされて使用できなくなるためです。
- include_mathjax – ファイルに mathjax.js ライブラリを含めるかどうかを指定します。受け入れられる値は、「require」値を除いて、include_plotlyjs に似ています。
- Post_script – プロット作成後に実行される JavaScript スニペットを含めることができます。
- Full_html – true の場合、関数は タグで始まる HTML ドキュメント全体を含む文字列を返します。 false の場合、関数は 要素で始まる HTML 文字列を返します。
- Animation_opts – カスタム アニメーション プロパティをディクショナリとして指定できます。これらの値は、plotly.js の plotly.animate 関数に渡されます。
- Default_width – 結果の Figure のデフォルトの幅をピクセル単位で指定します。
- Default_height – Figure のデフォルトの高さをピクセル単位で指定します。
- Validate – HTML 文字列に変換する前に Figure を検証する必要があるかどうかを決定します。
- Div_id – プロットが配置されている div タグの id 属性の値を指定します。
次に、関数は Figure の文字列表現を文字列として返します。
使用例
次のコードは、to_html 関数を使用して Figure を HTML 文字列表現に変換する方法を示しています。
輸入 陰謀的に。 特急 なので ピクセル
df = px. データ . 株式 ( 索引付き = 真実 )
図 = px. 範囲 ( df 、 facet_col = '会社' 、 facet_col_wrap = 2 )
図。 見せる ( )上記の例では、Plotly Express モジュールを px としてインポートすることから始めます。次に、Plotly の株式データを使用してデータ フレームを作成します。
最後に、px.area 関数を使用してファセット エリア プロットを作成します。これにより、以下に示すような数値が返されます。
以下のコードに示すように、上の図を HTML 文字列表現に変換できます。
輸入 陰謀的に。 これ なので これ
これ。 to_html ( 図 、 full_html = 間違い )上記のコードを実行すると、下のスクリーンショットに示すように大量の HTML 文字列が返されます。
HTML ドキュメントは
要素から始まることに注意してください。 HTML ファイル全体を含める場合は、次のようにパラメーター full_html=True を設定します。 輸入 陰謀的に。 これ なので これ
これ。 to_html ( 図 、 full_html = 真実 )
マークアップが タグで始まることに注意してください。
plotly.js を含めるには、パラメーターを次のように設定できます。
輸入 陰謀的に。 これ なので これ
これ。 to_html ( 図 、 include_plotlyjs = 「cdn」 、 full_html = 真実 )上記の例では、関数に CDN リンクを介して plotly.js ライブラリを含めるように指示しています。
以下の出力からこれを確認できます。
to_html ドキュメントを使用する最良の方法は、HTML 文字列を HTML ファイルにエクスポートすることです。
以下に示すように、単純なコードを実行することでこれを行うことができます。
輸入 陰謀的に。 これ なので これ
と 開いた ( 「facetted.html」 、 'の' ) なので f:
f. 書き込み行 ( これ。 to_html ( 図 、 include_plotlyjs = 'cnd' 、 full_html = 真実 ) )この例では、Python の file モジュールを使用して、HTML 文字列を N html ファイルとして書き込みます。
次に、HTML ドキュメントをブラウザーで開き、次の図を表示します。
結論
おめでとうございます。plotly.io.to_html 関数を使用して、Plotly の図を HTML 文字列として正常にエクスポートしました。