rex0220 マークダウンプラグイン パイチャートと縦棒グラフ表示

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

概要

マークダウンプラグインは、Mermaid ライブラリの書式でチャートやグラフを表示できます。
計算式プラグインで、テーブルデータからパイチャートと縦棒グラフを表示してみます。
パイチャートが既定で降順に表示されるため、縦棒グラフも降順にします。

※rex0220 マークダウンプラグイン 縦棒グラフ表示を変更

• 計算式プラグインでテーブルから区分別に金額を集計して、テーブル２にセット
• テーブル2から文字列複数行にマークダウン形式で集計データをセット
• マークダウンプラグインで、パイチャートと縦棒グラフを表示
• パイチャートは、オプションで色指定
• Mermaid ライブラリでは、まだ縦棒に色を指定できないので、CSSを指定
  • パイチャートに合わせて、opacity: 0.7;
• 比較しやすいように、横並びプラグインを適用

操作例

アプリ設定

パイチャートと縦棒グラフを表示のために、文字列複数行とスペース項目を用意します。

• CSS 用にスペース項目を追加
• グラフ表示用にスペース項目を二つ追加
• テーブルと集計用テーブルを配置
• 文字列複数行を二つ追加

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

計算式プラグイン設定

OPTION: 非同期計算

// space0:(space0) SPACER
TAGS_HTML(
  TAG("style","#user-js-space0 { display: none;}"),
  TAG("style",JOIN(ARRAY_MAP(ARRAY("#e74c3c", "#3498db", "#2ecc71", "#f1c40f", "#9b59b6",
 "#1abc9c", "#e67e22", "#34495e", "#ff66b2", "#95a5a6"), xx, idx,
    "#user-js-space2 .bar-plot-0 rect:nth-child("&(idx+1)&") { fill: "&xx&";opacity: 0.7;}"
  ),NEWLINE()))
)

// テーブル2 SUBTABLE
TLTABLE(テーブル,
  TPFILTER(区分),
  TPKEY(区分),TPVAL(金額),
  TPOUT(区分2,金額2),
  TPSORT(金額2,0)
)

// テーブル2.区分2 DROP_DOWN
// テーブル2.金額2 NUMBER

// 文字列複数行1 MULTI_LINE_TEXT (editable)
LET(
  colors, JOIN(ARRAY_MAP(ARRAY("#e74c3c", "#3498db", "#2ecc71", "#f1c40f", "#9b59b6",
   "#1abc9c", "#e67e22", "#34495e", "#ff66b2", "#95a5a6"), xx, idx,
     "'pie"&(idx+1)&"':'"&xx&"'"
  ),","),
  pie, JOIN(DIC_MAP(TABLE_DIC(テーブル2,区分2,金額2),key,val,"'"&key&"': "&val),NEWLINE()),
  REPLACEALL(JOIN(ARRAY(
    "### 円グラフ（Pie Chart）",
    "",
    "```mermaid",
    "%%{init: {'themeVariables': {",
    "  " & colors,
    "}}}%%",
    "pie showData",
    "    title 製品別 売上比較",
    "   " & pie,
    "```",
  ),NEWLINE()),"'",DQUOTE())
)

// 文字列複数行2 MULTI_LINE_TEXT (editable)
LET(type, TARRAY(区分2),
  amount, IF(type!="", TARRAY(NVL(金額2,0)), ARRAY(0)),
  maxAmount, IF(type!="", CEIL(MAX(金額2)*1.1,10000), 10000),
  type, IF(type!="", type, ARRAY("---")),
  REPLACEALL(JOIN(ARRAY(
  "### 📊 棒グラフ（縦）",
  "",
  "```mermaid",
  "xychart-beta",
  "    title '製品別 売上比較'",
  "    x-axis " & JSON_S(type),
  "    y-axis '売上（万円）' 0 --> " & maxAmount,
  "    bar " & JSON_S(amount),
  "```"
  ),NEWLINE()),"'",DQUOTE())
)

横並びプラグイン設定