Mermaid XY图 #

XY图（也称为散点图或折线图）用于展示两个变量之间的关系，通过在坐标系中绘制数据点来直观地呈现数据分布和趋势。

基本概念 #

XY图由以下几个部分组成：

X轴：水平轴，通常表示自变量
Y轴：垂直轴，通常表示因变量
数据点：在坐标系中表示的单个数据
系列：一组相关的数据点

实现方式 #

Mermaid目前没有专门的XY图语法，但可以使用流程图（Flowchart）或其他方式模拟实现简单的XY图效果：

1. 简单散点图模拟 #

mermaid

graph LR
  subgraph 坐标系
    direction TB
    
    %% 坐标轴
    origin((原点))
    x1((X-)) <--> origin <--> x2((X+))
    y1((Y+)) <--> origin <--> y2((Y-))
    
    %% 数据点
    p1((•)) -.- origin
    p2((•)) -.- origin
    p3((•)) -.- origin
    p4((•)) -.- origin
    p5((•)) -.- origin
  end

2. 折线图模拟 #

mermaid

graph LR
  subgraph 折线图
    direction TB
    
    %% 坐标轴
    origin((0))
    x1((0)) <--> origin <--> x2((10))
    y1((10)) <--> origin <--> y2((0))
    
    %% 数据点
    p1((•)) -.- origin
    p2((•)) -.- origin
    p3((•)) -.- origin
    p4((•)) -.- origin
    p5((•)) -.- origin
    
    %% 连接线
    p1 <--> p2 <--> p3 <--> p4 <--> p5
  end

数据可视化示例 #

1. 温度变化趋势 #

mermaid

graph LR
  subgraph 温度变化趋势
    direction TB
    
    %% 坐标轴
    origin((0))
    x1((0)) <--> origin <--> x2((12))
    y1((30)) <--> origin <--> y2((0))
    
    %% 月份标签
    xlabel1[1月] -.- x1
    xlabel2[6月] -.- origin
    xlabel3[12月] -.- x2
    
    %% 温度标签
    ylabel1[30°C] -.- y1
    ylabel2[15°C] -.- origin
    ylabel3[0°C] -.- y2
    
    %% 数据点
    p1((•)) -.- origin
    p2((•)) -.- origin
    p3((•)) -.- origin
    p4((•)) -.- origin
    p5((•)) -.- origin
    p6((•)) -.- origin
    p7((•)) -.- origin
    p8((•)) -.- origin
    p9((•)) -.- origin
    p10((•)) -.- origin
    p11((•)) -.- origin
    p12((•)) -.- origin
    
    %% 连接线
    p1 <--> p2 <--> p3 <--> p4 <--> p5 <--> p6 <--> p7 <--> p8 <--> p9 <--> p10 <--> p11 <--> p12
  end

2. 销量与价格关系 #

mermaid

graph LR
  subgraph 销量与价格关系
    direction TB
    
    %% 坐标轴
    origin((0))
    x1((0)) <--> origin <--> x2((100))
    y1((1000)) <--> origin <--> y2((0))
    
    %% 轴标签
    xlabel[价格 (元)] -.- x2
    ylabel[销量 (件)] -.- y1
    
    %% 数据点
    p1((•)) -.- origin
    p2((•)) -.- origin
    p3((•)) -.- origin
    p4((•)) -.- origin
    p5((•)) -.- origin
    p6((•)) -.- origin
    p7((•)) -.- origin
    p8((•)) -.- origin
    p9((•)) -.- origin
    p10((•)) -.- origin
  end

替代方案 #

由于Mermaid目前不支持原生XY图，以下是一些替代方案：

1. 使用其他图表库 #

可以使用专门的数据可视化库来创建XY图：

Chart.js #

html

<!DOCTYPE html>
<html>
<head>
    <title>XY Chart with Chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: [{
                    label: '数据系列',
                    data: [
                        {x: 10, y: 20},
                        {x: 15, y: 10},
                        {x: 20, y: 30},
                        {x: 25, y: 25},
                        {x: 30, y: 40}
                    ],
                    backgroundColor: 'rgba(75, 192, 192, 1)'
                }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'X轴'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Y轴'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

D3.js #

html

<!DOCTYPE html>
<html>
<head>
    <title>XY Chart with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .dot {
            fill: #69b3a2;
            stroke: #000;
        }
    </style>
</head>
<body>
    <svg width="400" height="400"></svg>
    <script>
        const svg = d3.select("svg"),
              margin = {top: 20, right: 20, bottom: 30, left: 40},
              width = +svg.attr("width") - margin.left - margin.right,
              height = +svg.attr("height") - margin.top - margin.bottom;

        const x = d3.scaleLinear()
            .domain([0, 40])
            .range([0, width]);

        const y = d3.scaleLinear()
            .domain([0, 50])
            .range([height, 0]);

        const g = svg.append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        // X轴
        g.append("g")
            .attr("transform", `translate(0,${height})`)
            .call(d3.axisBottom(x));

        // Y轴
        g.append("g")
            .call(d3.axisLeft(y));

        // 数据点
        const data = [
            {x: 10, y: 20},
            {x: 15, y: 10},
            {x: 20, y: 30},
            {x: 25, y: 25},
            {x: 30, y: 40}
        ];

        g.selectAll(".dot")
            .data(data)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("cx", d => x(d.x))
            .attr("cy", d => y(d.y))
            .attr("r", 5);
    </script>
</body>
</html>

2. 使用Markdown扩展 #

一些Markdown编辑器支持通过扩展语法创建XY图：

Mermaid未来计划 #

Mermaid团队正在考虑添加对XY图的支持，未来可能会有类似以下的语法：

mermaid

xy
  title: 温度与湿度关系
  xAxis: 温度 (°C)
  yAxis: 湿度 (%)
  series:
    - name: 数据1
      data: [[20, 60], [25, 50], [30, 40], [35, 30]]
    - name: 数据2
      data: [[22, 65], [27, 55], [32, 45], [37, 35]]

最佳实践 #

选择合适的图表类型：根据数据类型选择散点图或折线图
清晰的轴标签：为X轴和Y轴添加清晰的标签
适当的数据点大小：确保数据点大小适中，便于观察
合理的刻度：选择合适的轴刻度，避免数据过于拥挤或稀疏
使用颜色区分系列：如果有多个数据系列，使用不同颜色区分

应用场景 #

科学研究：展示实验数据和变量关系
数据分析：发现数据中的趋势和模式
业务分析：展示销售额与时间的关系
质量控制：展示产品质量与生产参数的关系
预测建模：展示预测值与实际值的比较

总结 #

虽然Mermaid目前不支持原生的XY图，但可以使用流程图模拟简单的效果，或者使用其他专门的数据可视化库（如Chart.js、D3.js）创建更专业的XY图。随着Mermaid的不断发展，未来可能会添加对XY图的原生支持。