Mermaid 雷达图 #
雷达图（Radar Chart）也称为蜘蛛图，用于展示多维度数据的比较，适用于性能评估、能力分析、产品对比等场景。
基本概念 #
雷达图由以下几个部分组成：
- 中心：图表的中心点
- 轴：从中心向外辐射的轴，每条轴代表一个维度
- 数据系列：不同颜色的多边形，代表不同的数据系列
- 网格线：同心圆，用于表示数值刻度
实现方式 #
Mermaid目前没有专门的雷达图语法，但可以使用流程图（Flowchart）来模拟实现简单的雷达图效果：
1. 简单雷达图 #
mermaid
graph LR
subgraph 雷达图
direction TB
%% 中心点
center((中心))
%% 轴
axis1((维度1)) -.- center
axis2((维度2)) -.- center
axis3((维度3)) -.- center
axis4((维度4)) -.- center
axis5((维度5)) -.- center
%% 数据点
p1((•)) -.- center
p2((•)) -.- center
p3((•)) -.- center
p4((•)) -.- center
p5((•)) -.- center
%% 连接线
p1 <--> p2 <--> p3 <--> p4 <--> p5 <--> p1
end
2. 多系列雷达图 #
mermaid
graph LR
subgraph 多系列雷达图
direction TB
%% 中心点
center((中心))
%% 轴
axis1((维度1)) -.- center
axis2((维度2)) -.- center
axis3((维度3)) -.- center
axis4((维度4)) -.- center
%% 数据系列1
p11((•)) -.- center
p12((•)) -.- center
p13((•)) -.- center
p14((•)) -.- center
p11 <--> p12 <--> p13 <--> p14 <--> p11
%% 数据系列2
p21((•)) -.- center
p22((•)) -.- center
p23((•)) -.- center
p24((•)) -.- center
p21 <--> p22 <--> p23 <--> p24 <--> p21
end
数据可视化示例 #
1. 产品性能比较 #
mermaid
graph LR
subgraph 产品性能比较
direction TB
%% 中心点
center((中心))
%% 性能维度
performance((性能)) -.- center
usability((易用性)) -.- center
features((功能)) -.- center
price((价格)) -.- center
reliability((可靠性)) -.- center
%% 产品A数据
a1((•)) -.- center
a2((•)) -.- center
a3((•)) -.- center
a4((•)) -.- center
a5((•)) -.- center
a1 <--> a2 <--> a3 <--> a4 <--> a5 <--> a1
%% 产品B数据
b1((•)) -.- center
b2((•)) -.- center
b3((•)) -.- center
b4((•)) -.- center
b5((•)) -.- center
b1 <--> b2 <--> b3 <--> b4 <--> b5 <--> b1
end
2. 团队能力评估 #
mermaid
graph LR
subgraph 团队能力评估
direction TB
%% 中心点
center((中心))
%% 能力维度
technical((技术能力)) -.- center
communication((沟通能力)) -.- center
teamwork((团队协作)) -.- center
problem_solving((解决问题)) -.- center
creativity((创造力)) -.- center
%% 团队1数据
t11((•)) -.- center
t12((•)) -.- center
t13((•)) -.- center
t14((•)) -.- center
t15((•)) -.- center
t11 <--> t12 <--> t13 <--> t14 <--> t15 <--> t11
%% 团队2数据
t21((•)) -.- center
t22((•)) -.- center
t23((•)) -.- center
t24((•)) -.- center
t25((•)) -.- center
t21 <--> t22 <--> t23 <--> t24 <--> t25 <--> t21
end
替代方案 #
由于Mermaid目前不支持原生雷达图，以下是一些替代方案：
1. 使用其他图表库 #
Chart.js #
html
<!DOCTYPE html>
<html>
<head>
<title>Radar Chart with Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myRadarChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['性能', '易用性', '功能', '价格', '可靠性'],
datasets: [{
label: '产品A',
data: [85, 90, 75, 65, 95],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
pointBackgroundColor: 'rgba(75, 192, 192, 1)'
}, {
label: '产品B',
data: [70, 75, 90, 85, 70],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointBackgroundColor: 'rgba(255, 99, 132, 1)'
}]
},
options: {
scales: {
r: {
beginAtZero: true,
max: 100
}
}
}
});
</script>
</body>
</html>
D3.js #
html
<!DOCTYPE html>
<html>
<head>
<title>Radar Chart with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.axis line, .axis path {
fill: none;
stroke: #000;
}
.axis text {
font-size: 12px;
}
.radar-line {
fill: none;
stroke: #69b3a2;
stroke-width: 2px;
}
.radar-area {
fill: #69b3a2;
fill-opacity: 0.3;
}
</style>
</head>
<body>
<svg width="400" height="400"></svg>
<script>
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = Math.min(width, height) / 2 - 40,
g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`);
// 数据
const data = [
{axis: "性能", value: 85},
{axis: "易用性", value: 90},
{axis: "功能", value: 75},
{axis: "价格", value: 65},
{axis: "可靠性", value: 95}
];
// 角度比例尺
const angle = d3.scalePoint()
.domain(data.map(d => d.axis))
.range([0, 2 * Math.PI]);
// 半径比例尺
const radiusScale = d3.scaleLinear()
.domain([0, 100])
.range([0, radius]);
// 绘制网格线
for (let i = 20; i <= 100; i += 20) {
g.append("circle")
.attr("r", radiusScale(i))
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-width", 0.5);
}
// 绘制轴
const axis = g.append("g")
.selectAll("g")
.data(data)
.join("g")
.attr("transform", d => `rotate(${(angle(d.axis) * 180 / Math.PI - 90)}) translate(${radius})`);
axis.append("line")
.attr("x1", -radius)
.attr("x2", 0)
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 0.5);
axis.append("text")
.attr("transform", d => angle(d.axis) > Math.PI ? `translate(-10,0) rotate(180)` : `translate(10,0)`)
.style("text-anchor", d => angle(d.axis) > Math.PI ? "end" : "start")
.text(d => d.axis);
// 绘制数据系列
const line = d3.lineRadial()
.curve(d3.curveLinearClosed)
.angle(d => angle(d.axis))
.radius(d => radiusScale(d.value));
g.append("path")
.datum(data)
.attr("fill", "#69b3a2")
.attr("fill-opacity", 0.3)
.attr("d", line);
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 2)
.attr("d", line);
// 绘制数据点
g.selectAll(".point")
.data(data)
.join("circle")
.attr("class", "point")
.attr("transform", d => `rotate(${(angle(d.axis) * 180 / Math.PI - 90)}) translate(${radiusScale(d.value)})`)
.attr("r", 4)
.attr("fill", "#69b3a2")
.attr("stroke", "#000")
.attr("stroke-width", 1);
</script>
</body>
</html>
2. 使用Markdown扩展 #
一些Markdown编辑器支持通过扩展语法创建雷达图：
Mermaid未来计划 #
Mermaid团队正在考虑添加对雷达图的支持，未来可能会有类似以下的语法：
mermaid
radar
title: 产品性能比较
labels: [性能, 易用性, 功能, 价格, 可靠性]
datasets:
- name: 产品A
data: [85, 90, 75, 65, 95]
- name: 产品B
data: [70, 75, 90, 85, 70]
最佳实践 #
- 维度数量适中：维度数量最好在3-8个之间，过多会导致图表难以阅读
- 统一的刻度：所有维度使用相同的数值范围
- 清晰的标签：为每个维度添加清晰的标签
- 适当的颜色区分：使用不同颜色区分不同的数据系列
- 避免重叠：如果数据系列过多，考虑使用多个雷达图
应用场景 #
- 性能评估：评估产品、团队或个人的多维度性能
- 能力分析：分析个人或团队的技能和能力
- 产品对比：比较不同产品的多维度特性
- 市场调研：分析不同品牌的市场表现
- 风险评估：评估项目或投资的多维度风险
总结 #
虽然Mermaid目前不支持原生的雷达图，但可以使用流程图模拟简单的效果，或者使用其他专门的数据可视化库（如Chart.js、D3.js）创建更专业的雷达图。随着Mermaid的不断发展，未来可能会添加对雷达图的原生支持。
最后更新：2026-02-08