Mermaid レーダーチャート構文 - Mermaid コードでレーダーチャートを生成するチュートリアル

レーダーチャートの紹介

レーダーチャートは、低次元データを円形形式でプロットする簡単な方法です。

レーダーチャートは、スパイダーチャート、スターチャート、ウェブチャート、極座標チャートとも呼ばれます。

アプリケーション

レーダーチャートは、データを円形形式で明確かつ簡潔に表現する必要がある開発者、データサイエンティスト、エンジニアに特に役立ちます。

通常、複数の実体の複数の次元におけるパフォーマンスをグラフィカルに要約および比較するために使用されます。

構文

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...

例

コード

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            
                                ---
title: "Grades"
---
radar-beta
  axis m["Math"], s["Chinese"], e["English"]
  axis h["History"], g["Geography"], a["Art"]
  curve a["Alice"]{85, 90, 80, 70, 75, 90}
  curve b["Bob"]{70, 75, 85, 80, 90, 85}

  max 100
  min 0

構文の詳細

タイトル

title：レーダーチャートの上部にレンダリングされます。

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            radar-beta
  title Title of the Radar Diagram
  ...

軸

axis：axis 構文はレーダーチャートの軸を定義するために使用します。

各軸は 1 つの ID と任意のラベルで表されます。

1 つの行で複数の軸を定義できます。

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            radar-beta
  axis id1["Label1"]
  axis id2["Label2"], id3["Label3"]
  ...

曲線

curve：curve 構文はレーダーチャートの曲線のデータ点を定義するために使用します。

各曲線は 1 つの ID、任意のラベル、値のリストで表されます。

値は数値のリストまたはキーと値のペアのリストで定義できます。キーと値のペアを使用する場合、キーは軸 ID を表し、値はデータ点を表します。

1 つの行で複数の曲線を定義できます。

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            radar-beta
  axis axis1, axis2, axis3
  curve id1["Label1"]{1, 2, 3}
  curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
  curve id4{ axis3: 30, axis1: 20, axis2: 10 }
  ...

オプション

showLegend：showLegend 構文はレーダーチャートの凡例を表示または非表示にするために使用し、デフォルトでは表示されます。
max：レーダーチャートの最大値で、レーダーチャートのスケーリングに使用されます。指定しない場合、データ点から最大値が計算されます。
min：レーダーチャートの最小値で、レーダーチャートのスケーリングに使用されます。指定しない場合、最小値は 0 です。
graticule：graticule 構文はレーダーチャートにレンダリングする経緯線のタイプを定義するために使用します。経緯線は circle または polygon にできます。指定しない場合、デフォルトは circle です。
ticks：ticks 構文は経緯線上の目盛りの数を定義するために使用します。これは描画される同心円または多角形の数で、レーダーチャートのスケールを示すために使用されます。指定しない場合、デフォルトの目盛り数は 5 です。

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            radar-beta
  ...
  showLegend true
  max 100
  min 0
  graticule circle
  ticks 5
  ...

構成

パラメータ	説明	デフォルト値
width	レーダーチャートの幅	600
height	レーダーチャートの高さ	600
marginTop	レーダーチャートの上マージン	50
marginBottom	レーダーチャートの下マージン	50
marginLeft	レーダーチャートの左マージン	50
marginRight	レーダーチャートの右マージン	50
axisScaleFactor	座標軸のスケーリング係数	1
axisLabelFactor	座標軸ラベルの位置を調整する係数	1.05
curveTension	角丸曲線の張力	0.17

テーマ変数

グローバルテーマ変数

情報

これらの変数のデフォルト値は、使用されるテーマによって異なります。デフォルト値を上書きするには、構成の themeVariables セクションで目的の値を設定します： config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"

レーダーチャートはカラースケール cScale${i} をサポートします。ここで i は 0 からテーマのカラースケールの最大色数までの数値です。通常、最大色数は 12 です。

プロパティ	説明
fontSize	タイトルのフォントサイズ
titleColor	タイトルの色
cScale$	i 番目の曲線のカラースケール

レーダーのスタイルオプション

情報

レーダーの特定の変数は radar キー内にあります。レーダーのスタイルオプションを設定するには、以下の構文を使用します。 config: themeVariables: radar: axisColor: "#FF0000"

プロパティ	説明	デフォルト値
axisColor	座標軸線の色	black
axisStrokeWidth	座標軸線の幅	1
axisLabelFontSize	座標軸ラベルのフォントサイズ	12px
curveOpacity	曲線の不透明度	0.7
curveStrokeWidth	曲線の幅	2
graticuleColor	経緯線の色	black
graticuleOpacity	経緯線の不透明度	0.5
graticuleStrokeWidth	経緯線の幅	1
legendBoxSize	凡例ボックスのサイズ	10
legendFontSize	凡例のフォントサイズ	14px

構成とテーマの例

コード

                            
                                
                                    
                                    コピー
                                
                                
                                    
                                    埋め込み
                                
                            
                            
                                ---
config:
  radar:
    axisScaleFactor: 0.25
    curveTension: 0.1
  theme: base
  themeVariables:
    cScale0: "#FF0000"
    cScale1: "#00FF00"
    cScale2: "#0000FF"
    radar:
      curveOpacity: 0
---
radar-beta
  axis A, B, C, D, E
  curve c1{1,2,3,4,5}
  curve c2{5,4,3,2,1}
  curve c3{3,3,3,3,3}