rex0220 マークダウンプラグイン レーダーチャート

マークダウンプラグインと計算式プラグインの連携で、レーダーチャートを表示してみます。

概要

マークダウンプラグインは、Mermaid ライブラリの書式でチャートやグラフを表示できます。
計算式プラグインで、ラジオボタンからレーダーチャートを表示してみます。
横並びプラグインで、レーダーチャートとラジオボタンを並べています。

操作例

アプリ設定

横並びにするため、スペース項目とラジオボタンをグループに入れています。

• スペース項目：　マークダウン表示用（要素IDをセット）
• ラジオボタン：　教科毎に設定
• 文字列複数行：　マークダウンを入れる

マークダウンプラグイン設定

使用する文字列複数行を選択し、スペース項目を指定します。

計算式プラグイン設定

文字列複数行に、レーダーチャートを表示する Mermaid 式を指定します。

OPTION: 非同期計算

// 文字列複数行1 MULTI_LINE_TEXT (hide)
REPLACEALL(JOIN(ARRAY(
  "### 🕸️ レーダーチャート（Radar Chart）",
  "",
  "```mermaid",
  "---",
  "title: '成績評価'",
  "config:",
  "  useMaxWidth: false",
  "  radar:",
  "    width: 400",
  "    height: 400",
  "---",
  "radar-beta",
  "  axis m['国語'], s['公民'], e['地理歴史']",
  "  axis h['数学'], g['理科'], a['英語']",
  "  curve a['"&タイトル&"']{"&ARRAY(国語,公民,地理歴史,数学,理科,英語)&"}",
  "",
  "  max 5",
  "  min 0",
  "  graticule polygon",
  "```"
),NEWLINE()),"'",DQUOTE())