画图工具Mermaid学习笔记——饼图、象限图

(以下均省略在md中需要的"""mermaid"""前后缀)

饼图基础格式：

pie showdata(可选，是否在表头后显示实际数组) title （可选，加标题） (xxxx)

        "分组名称"：数值大小 ……

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

部分参数调整：在前面插入如下代码可设置百分比标注文字离圆心的位置、饼图外圈的线条粗细

%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%

---

 象限图基础格式：

quadrantChart

        title  xxxx

        x-axis  <left text> --> <right text>  (也可只放左侧文本)

        y-axis <bottom text> --> <top text>  (也可只放下侧文本)

        quandrant 1 xxxx  (置于象限1的文本，象限234同理)

        Point name : [ x , y ]     (坐标取值范围 0 到 1 )

（如果图中没有可用的点，则象限内文本将呈现在象限中心）

        

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]

 

图表参数设置：有 chart configurations 和 chart theme  variables 两方面可供设置，格式参考：

%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, 
"themeVariables": {"quadrant2TextFill": "#ff0000"} }}%%

部分常用参数：(默认值见原文档)

Chart Configurations

Parameter	Meaning	Parameter	Meaning
chartWidth / chartHeight	图表大小尺寸	xAxisPosition	X轴出现位置
titleFontsize	标题字体大小	pointLabelFontSize	点文本字体大小
quadrantLabelFontSize	象限文本字体大小	pointRadius	点的半径

Chart Theme Variables

Parameter	Meaning	Parameter	Meaning
quadrant1Fill	象限一填充颜色	quadrantPointFill	点填充颜色
quadrant1TextFill	象限一文本颜色	quadrantPointTextFill	点文本颜色

---