マークダウンプラグインと計算式プラグインの連携で、縦棒グラフを表示してみます。
概要
マークダウンプラグインは、Mermaid ライブラリの書式でチャートやグラフを表示できます。
計算式プラグインで、テーブルデータから縦棒グラフを表示してみます。
- 計算式プラグインでテーブルから区分別に金額を集計して、テーブル２にセット
- テーブル2から文字列複数行にマークダウン形式で集計データをセット
- マークダウンプラグインで、縦棒グラフを表示
- Mermaid ライブラリでは、まだ縦棒に色を指定できないので、CSSを指定
- 比較しやすいように、横並びプラグインを適用
操作例
Mermaid での縦棒グラフ
文字列で、縦棒グラフに必要な情報を指定することで、グラフを表示します。
このため、計算式プラグインで文字列を生成することで動的にグラフを表示できます。
アプリ設定
縦棒の色指定を比較するため、グラフを二つ表示します。
- CSS 用にスペース項目を追加
- グラフ表示用にスペース項目を二つ追加
- テーブルと集計用テーブルを配置
- 文字列複数行を二つ追加
マークダウンプラグイン設定
文字列複数行ごとに、スペース項目を割り当てます。
計算式プラグイン設定
文字列複数行1と文字列複数行2 には、同じ計算式を指定しています。
space0 に、縦棒の色を指定する 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&";}"
),NEWLINE()))
)
// テーブル2 SUBTABLE
TLTABLE(テーブル,
TPFILTER(区分),
TPKEY(区分),TPVAL(金額),
TPOUT(区分2,金額2),
TPSORT(金額2)
)
// テーブル2.区分2 DROP_DOWN
// テーブル2.金額2 NUMBER
// 文字列複数行1 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())
)
// 文字列複数行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())
)