78 lines
3.2 KiB
HTML
78 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Body Composition Radar Chart</title>
|
|
<style>
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.axis {
|
|
stroke: #000;
|
|
stroke-width: 1;
|
|
}
|
|
.region {
|
|
fill-opacity: 0.5;
|
|
}
|
|
.label {
|
|
font-size: 14px;
|
|
font-family: Arial, sans-serif;
|
|
fill: #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg width="400" height="400" viewBox="0 0 400 400">
|
|
<!-- Define the axes and regions -->
|
|
<polygon class="region" points="200,20 380,180 200,340 20,180 200,20" fill="#ffcc00" />
|
|
<polygon class="region" points="200,20 360,160 200,320 40,160 200,20" fill="#00b37e" />
|
|
<polygon class="region" points="200,20 340,140 200,300 60,140 200,20" fill="#0077b3" />
|
|
<polygon class="region" points="200,20 320,120 200,280 80,120 200,20" fill="#ff4d4d" />
|
|
|
|
<!-- Define the axes -->
|
|
<line class="axis" x1="200" y1="20" x2="200" y2="380" />
|
|
<line class="axis" x1="20" y1="180" x2="380" y2="180" />
|
|
<line class="axis" x1="200" y1="340" x2="200" y2="20" />
|
|
<line class="axis" x1="40" y1="160" x2="360" y2="160" />
|
|
<line class="axis" x1="200" y1="20" x2="200" y2="320" />
|
|
<line class="axis" x1="60" y1="140" x2="340" y2="140" />
|
|
<line class="axis" x1="200" y1="20" x2="200" y2="280" />
|
|
<line class="axis" x1="80" y1="120" x2="320" y2="120" />
|
|
|
|
<!-- Define the data points and lines -->
|
|
<circle cx="200" cy="20" r="5" fill="black" />
|
|
<circle cx="380" cy="180" r="5" fill="black" />
|
|
<circle cx="200" cy="340" r="5" fill="black" />
|
|
<circle cx="20" cy="180" r="5" fill="black" />
|
|
<circle cx="360" cy="160" r="5" fill="black" />
|
|
<circle cx="200" cy="320" r="5" fill="black" />
|
|
<circle cx="60" cy="140" r="5" fill="black" />
|
|
<circle cx="340" cy="140" r="5" fill="black" />
|
|
<circle cx="200" cy="280" r="5" fill="black" />
|
|
<circle cx="80" cy="120" r="5" fill="black" />
|
|
<circle cx="320" cy="120" r="5" fill="black" />
|
|
|
|
<!-- Define the labels -->
|
|
<text class="label" x="200" y="10" text-anchor="middle">躯干</text>
|
|
<text class="label" x="380" y="180" text-anchor="middle">右上肢</text>
|
|
<text class="label" x="200" y="340" text-anchor="middle">右下肢</text>
|
|
<text class="label" x="20" y="180" text-anchor="middle">左下肢</text>
|
|
<text class="label" x="360" y="160" text-anchor="middle">左上肢</text>
|
|
<text class="label" x="60" y="140" text-anchor="middle">左下肢</text>
|
|
<text class="label" x="340" y="140" text-anchor="middle">右上肢</text>
|
|
<text class="label" x="80" y="120" text-anchor="middle">左下肢</text>
|
|
<text class="label" x="320" y="120" text-anchor="middle">右下肢</text>
|
|
|
|
<!-- Define the legend -->
|
|
<rect x="10" y="360" width="20" height="20" fill="#ffcc00" />
|
|
<text class="label" x="40" y="375" text-anchor="start">低标准</text>
|
|
<rect x="10" y="340" width="20" height="20" fill="#00b37e" />
|
|
<text class="label" x="40" y="355" text-anchor="start">标准</text>
|
|
<rect x="10" y="320" width="20" height="20" fill="#0077b3" />
|
|
<text class="label" x="40" y="335" text-anchor="start">超标准</text>
|
|
</svg>
|
|
</body>
|
|
</html> |