返回 ppt-master
gauge_chart.svg
根目录 / skills / ppt-master / templates / charts / gauge_chart.svg
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"
2 font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
3 font-size="12">
4 <!--
5 Gauge Chart Template
6 Usage: Single metric attainment display
7 Scenarios: KPI completion, health index, performance score
8 Supports: 3 gauges side by side
9 -->
10 <!-- Background -->
11 <rect width="1280" height="720" fill="#F8FAFC"/>
12 <!-- Title -->
13 <g id="header" data-pptx-bounds="40 15 1200 125">
14 <text x="640" y="60"
15 font-size="32" font-weight="700" fill="#0F172A" text-anchor="middle">Core Business KPI Dashboard</text>
16 <text x="640" y="95"
17 font-size="18" fill="#64748B" text-anchor="middle">Q4 Performance Real-time Data</text>
18 </g>
19 <!-- Gauge 1: Sales Completion 85% -->
20 <g id="gauge1" data-pptx-bounds="10 191 427 351" transform="translate(220, 380)">
21 <!-- Background Arc -->
22 <path d="M -150,0 A 150,150 0 0,1 150,0" fill="none" stroke="#E2E8F0" stroke-width="30" stroke-linecap="round"/>
23 <!-- Scales (0-60% Red, 60-80% Amber, 80-100% Emerald) -->
24 <path d="M -150,0 A 150,150 0 0,1 46.35,-142.66" fill="none" stroke="#FECACA" stroke-width="30" stroke-linecap="round"/>
25 <path d="M 46.35,-142.66 A 150,150 0 0,1 121.35,-88.17" fill="none" stroke="#FDE68A" stroke-width="30" stroke-linecap="round"/>
26 <path d="M 121.35,-88.17 A 150,150 0 0,1 150,0" fill="none" stroke="#A7F3D0" stroke-width="30" stroke-linecap="round"/>
27 <!-- Value Arc 85% -->
28 <path d="M -150,0 A 150,150 0 0,1 133.65,-68.10" fill="none" stroke="#059669" stroke-width="30" stroke-linecap="round"/>
29 <!-- Tick Marks -->
30 <line x1="-135" y1="0" x2="-120" y2="0" stroke="#64748B" stroke-width="2"/>
31 <line x1="-95.5" y1="-95.5" x2="-84.85" y2="-84.85" stroke="#64748B" stroke-width="2"/>
32 <line x1="0" y1="-135" x2="0" y2="-120" stroke="#64748B" stroke-width="2"/>
33 <line x1="95.5" y1="-95.5" x2="84.85" y2="-84.85" stroke="#64748B" stroke-width="2"/>
34 <line x1="135" y1="0" x2="120" y2="0" stroke="#64748B" stroke-width="2"/>
35 <!-- Tick Labels -->
36 <text x="-155" y="25"
37 font-size="14" fill="#64748B" text-anchor="middle">0%</text>
38 <text x="0" y="-155"
39 font-size="14" fill="#64748B" text-anchor="middle">50%</text>
40 <text x="155" y="25"
41 font-size="14" fill="#64748B" text-anchor="middle">100%</text>
42 <!-- Needle (85% = 153°, start from -90°) -->
43 <g transform="rotate(63)">
44 <path d="M 0,-100 L -8,0 L 0,15 L 8,0 Z" fill="#0F172A"/>
45 </g>
46 <circle cx="0" cy="0" r="15" fill="#0F172A"/>
47 <circle cx="0" cy="0" r="8" fill="#FFFFFF"/>
48 <!-- Center Value -->
49 <text x="0" y="60"
50 font-size="48" font-weight="700" fill="#10B981" text-anchor="middle">85%</text>
51 <!-- Title -->
52 <text x="0" y="100"
53 font-size="18" font-weight="600" fill="#0F172A" text-anchor="middle">Sales Target Attainment</text>
54 <!-- Status Tag -->
55 <rect x="-40" y="115" width="80" height="26" rx="13" fill="#D1FAE5"/>
56 <text x="0" y="133"
57 font-size="13" font-weight="600" fill="#10B981" text-anchor="middle">Excellent</text>
58 </g>
59 <!-- Gauge 2: Customer Satisfaction 72% -->
60 <g id="gauge2" data-pptx-bounds="430 191 427 351" transform="translate(640, 380)">
61 <!-- Background Arc -->
62 <path d="M -150,0 A 150,150 0 0,1 150,0" fill="none" stroke="#E2E8F0" stroke-width="30" stroke-linecap="round"/>
63 <!-- Scales -->
64 <path d="M -150,0 A 150,150 0 0,1 46.35,-142.66" fill="none" stroke="#FECACA" stroke-width="30" stroke-linecap="round"/>
65 <path d="M 46.35,-142.66 A 150,150 0 0,1 121.35,-88.17" fill="none" stroke="#FDE68A" stroke-width="30" stroke-linecap="round"/>
66 <path d="M 121.35,-88.17 A 150,150 0 0,1 150,0" fill="none" stroke="#A7F3D0" stroke-width="30" stroke-linecap="round"/>
67 <!-- Value Arc 72% -->
68 <path d="M -150,0 A 150,150 0 0,1 95.61,-115.58" fill="none" stroke="#2563EB" stroke-width="30" stroke-linecap="round"/>
69 <!-- Tick Marks -->
70 <line x1="-135" y1="0" x2="-120" y2="0" stroke="#64748B" stroke-width="2"/>
71 <line x1="-95.5" y1="-95.5" x2="-84.85" y2="-84.85" stroke="#64748B" stroke-width="2"/>
72 <line x1="0" y1="-135" x2="0" y2="-120" stroke="#64748B" stroke-width="2"/>
73 <line x1="95.5" y1="-95.5" x2="84.85" y2="-84.85" stroke="#64748B" stroke-width="2"/>
74 <line x1="135" y1="0" x2="120" y2="0" stroke="#64748B" stroke-width="2"/>
75 <!-- Tick Labels -->
76 <text x="-155" y="25"
77 font-size="14" fill="#64748B" text-anchor="middle">0%</text>
78 <text x="0" y="-155"
79 font-size="14" fill="#64748B" text-anchor="middle">50%</text>
80 <text x="155" y="25"
81 font-size="14" fill="#64748B" text-anchor="middle">100%</text>
82 <!-- Needle -->
83 <g transform="rotate(39.6)">
84 <path d="M 0,-100 L -8,0 L 0,15 L 8,0 Z" fill="#0F172A"/>
85 </g>
86 <circle cx="0" cy="0" r="15" fill="#0F172A"/>
87 <circle cx="0" cy="0" r="8" fill="#FFFFFF"/>
88 <!-- Center Value -->
89 <text x="0" y="60"
90 font-size="48" font-weight="700" fill="#3B82F6" text-anchor="middle">72%</text>
91 <!-- Title -->
92 <text x="0" y="100"
93 font-size="18" font-weight="600" fill="#0F172A" text-anchor="middle">Customer Satisfaction</text>
94 <!-- Status Tag -->
95 <rect x="-35" y="115" width="70" height="26" rx="13" fill="#DBEAFE"/>
96 <text x="0" y="133"
97 font-size="13" font-weight="600" fill="#3B82F6" text-anchor="middle">Good</text>
98 </g>
99 <!-- Gauge 3: Inventory Turnover 58% -->
100 <g id="gauge3" data-pptx-bounds="850 191 427 351" transform="translate(1060, 380)">
101 <!-- Background Arc -->
102 <path d="M -150,0 A 150,150 0 0,1 150,0" fill="none" stroke="#E2E8F0" stroke-width="30" stroke-linecap="round"/>
103 <!-- Scales -->
104 <path d="M -150,0 A 150,150 0 0,1 46.35,-142.66" fill="none" stroke="#FECACA" stroke-width="30" stroke-linecap="round"/>
105 <path d="M 46.35,-142.66 A 150,150 0 0,1 121.35,-88.17" fill="none" stroke="#FDE68A" stroke-width="30" stroke-linecap="round"/>
106 <path d="M 121.35,-88.17 A 150,150 0 0,1 150,0" fill="none" stroke="#A7F3D0" stroke-width="30" stroke-linecap="round"/>
107 <!-- Value Arc 58% -->
108 <path d="M -150,0 A 150,150 0 0,1 37.30,-145.29" fill="none" stroke="#D97706" stroke-width="30" stroke-linecap="round"/>
109 <!-- Tick Marks -->
110 <line x1="-135" y1="0" x2="-120" y2="0" stroke="#64748B" stroke-width="2"/>
111 <line x1="-95.5" y1="-95.5" x2="-84.85" y2="-84.85" stroke="#64748B" stroke-width="2"/>
112 <line x1="0" y1="-135" x2="0" y2="-120" stroke="#64748B" stroke-width="2"/>
113 <line x1="95.5" y1="-95.5" x2="84.85" y2="-84.85" stroke="#64748B" stroke-width="2"/>
114 <line x1="135" y1="0" x2="120" y2="0" stroke="#64748B" stroke-width="2"/>
115 <!-- Tick Labels -->
116 <text x="-155" y="25"
117 font-size="14" fill="#64748B" text-anchor="middle">0%</text>
118 <text x="0" y="-155"
119 font-size="14" fill="#64748B" text-anchor="middle">50%</text>
120 <text x="155" y="25"
121 font-size="14" fill="#64748B" text-anchor="middle">100%</text>
122 <!-- Needle -->
123 <g transform="rotate(14.4)">
124 <path d="M 0,-100 L -8,0 L 0,15 L 8,0 Z" fill="#0F172A"/>
125 </g>
126 <circle cx="0" cy="0" r="15" fill="#0F172A"/>
127 <circle cx="0" cy="0" r="8" fill="#FFFFFF"/>
128 <!-- Center Value -->
129 <text x="0" y="60"
130 font-size="48" font-weight="700" fill="#F59E0B" text-anchor="middle">58%</text>
131 <!-- Title -->
132 <text x="0" y="100"
133 font-size="18" font-weight="600" fill="#0F172A" text-anchor="middle">Inventory Turnover</text>
134 <!-- Status Tag -->
135 <rect x="-40" y="115" width="80" height="26" rx="13" fill="#FEF3C7"/>
136 <text x="0" y="133"
137 font-size="13" font-weight="600" fill="#F59E0B" text-anchor="middle">Warning</text>
138 </g>
139 <!-- Legend -->
140 <g id="legendBar" data-pptx-bounds="265 593 750 54" transform="translate(340, 600)">
141 <rect x="0" y="0" width="600" height="40" rx="8" fill="#FFFFFF" stroke="#E2E8F0"/>
142 <rect x="30" y="12" width="16" height="16" rx="3" fill="#FECACA"/>
143 <text x="55" y="24"
144 font-size="13" font-weight="600" fill="#475569">Critical (0-60%)</text>
145 <rect x="180" y="12" width="16" height="16" rx="3" fill="#FDE68A"/>
146 <text x="205" y="24"
147 font-size="13" font-weight="600" fill="#475569">Warning (60-80%)</text>
148 <rect x="340" y="12" width="16" height="16" rx="3" fill="#A7F3D0"/>
149 <text x="365" y="24"
150 font-size="13" font-weight="600" fill="#475569">Target (80-100%)</text>
151 <text x="500" y="24"
152 font-size="13" fill="#94A3B8">Benchmark: 80%</text>
153 </g>
154 <!-- Data Source -->
155 <g id="source" data-pptx-bounds="40 670 1200 40">
156 <text x="640" y="695"
157 font-size="14" fill="#94A3B8" text-anchor="middle">Source: Business Intelligence Platform · Live Data</text>
158 </g>
159 </svg>
160
160 lines Plain Text