Discourse Graph (Plotly) の埋め込み![image|616x500](upload://yffctWFiXHM44cODU8IlioEzbDC.p

:information_source: 概要 方程式からPlotlyグラフを投稿に埋め込む
:hammer_and_wrench: リポジトリ GitHub - NateDhaliwal/discourse-graph-embed
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者の方へ Discourseテーマの使用方法入門ガイド

このテーマコンポーネントをインストール

このコンポーネントを使用すると、ユーザーはPlotly.jsを使用してトピックや返信にグラフを追加できます。

これを使用するには、書式設定ツールバーの image (:chart_increasing:) アイコンをクリックします。次に、[wrap][/wrap]内の数式を編集するだけです。(偶然ですが、wrap内のバッククォートは何も影響しないことがわかりました)

例:

また、グラフにカーソルを合わせると、点の座標を見つけることができます。

当初はDesmos埋め込みを使用しようとしましたが、あまりうまくいきませんでした。Plotly(提携なし)は、計算を実行するためのMathJS(これもオープンソース)と組み合わせて使用できる優れたライブラリです(オープンソースでもあります!)。

Plotlyを使用すると、sin、cosine、tangent、および対数(底10)なども使用できます。

Plotlyを使用すると、右上にある埋め込みの:camera:アイコンをクリックして、グラフをPNGとしてダウンロードすることもできます。

:warning: 注意:三角関数のグラフ(例:sincostan)は「曲線」ではなく、やや尖った形になります。

オプションで、show_graph_in_modal設定(デフォルトはオフ)を有効にすると、グラフが投稿の下ではなくモーダルポップアップに表示されるため、それほどスペースを取りません。

モーダルでは、[kbd]グラフを読み込む[/kbd][1]ボタンをクリックして、グラフを読み込んで表示します。

投稿:

モーダル:

お役に立てば幸いです!


  1. ボタンのラベルとタイトルはテーマの翻訳で編集可能です ↩︎

「いいね!」 7

アイコンはかなり…薄いとでも言えばいいのでしょうか :joy:

「いいね!」 1

修正をプッシュしました。これで動作しますか?

「いいね!」 1

見事に。ありがとう。

「いいね!」 1

投稿の下ではなくモーダルポップアップにグラフを表示する新しい設定 show_graph_in_modal を追加しました。これにより、スペースを取りすぎるのを防ぎます。

モーダルでは、ボタン「グラフを読み込む[1]」をクリックすると、グラフが読み込まれて表示されます。

投稿:

モーダル:


  1. ボタンのラベルとタイトルはテーマの翻訳で編集可能です ↩︎

「いいね!」 4

これは素晴らしいですね。よくできました、ネイト :+1:

「いいね!」 3