返回 ppt-master
stacked_bar_chart.svg
根目录 / skills / ppt-master / templates / charts / stacked_bar_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 Stacked Bar Chart Template
6 Purpose: Category composition over time, proportional analysis
7 Use cases: Revenue breakdown, Cost decomposition, Market share
8 Feature: Modern pill-stacked aesthetic, embedded data labels, AI Insight dashboard
9 -->
10 <!-- Background -->
11 <rect width="1280" height="720" fill="#F8FAFC"/>
12 <!-- ==================== Header ==================== -->
13 <g id="header" data-pptx-bounds="60 35 700 75">
14 <text x="60" y="70" font-size="32" font-weight="800" fill="#0F172A">Quarterly Revenue Breakdown</text>
15 <text x="60" y="100" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1">2024-2025 FINANCIAL YEAR · UNIT: $M</text>
16 </g>
17 <!-- ==================== Chart Area ==================== -->
18 <g id="stacked_bar_chart" data-pptx-bounds="90 120 990 470" data-pptx-replace-with="chart">
19 <metadata type="application/json">
20 {
21 "name": "stacked_bar_chart",
22 "x": 120,
23 "y": 121,
24 "width": 960,
25 "height": 462.5,
26 "type": "column",
27 "grouping": "stacked",
28 "categories": ["Q1'24", "Q2'24", "Q3'24", "Q4'24", "Q1'25"],
29 "series": [
30 {"name": "Product Sales", "values": [140, 160, 180, 200, 220]},
31 {"name": "Services", "values": [90, 100, 110, 120, 130]},
32 {"name": "Subscriptions", "values": [50, 60, 75, 90, 105]},
33 {"name": "Other Revenue", "values": [20, 30, 35, 40, 45]}
34 ],
35 "style": {"colors": ["#6366F1", "#0EA5E9", "#10B981", "#F59E0B"]}
36 }
37 </metadata>
38 <g id="chartArea">
39 <!-- Zebra Shading for Quarters -->
40 <rect x="332" y="150" width="192" height="400" fill="#F1F5F9" opacity="0.5"/>
41 <rect x="716" y="150" width="192" height="400" fill="#F1F5F9" opacity="0.5"/>
42 <!-- Horizontal Grid Lines -->
43 <line x1="140" y1="550" x2="1080" y2="550" stroke="#E2E8F0" stroke-width="1.5"/>
44 <line x1="140" y1="470" x2="1080" y2="470" stroke="#F1F5F9" stroke-width="1.5"/>
45 <line x1="140" y1="390" x2="1080" y2="390" stroke="#F1F5F9" stroke-width="1.5"/>
46 <line x1="140" y1="310" x2="1080" y2="310" stroke="#F1F5F9" stroke-width="1.5"/>
47 <line x1="140" y1="230" x2="1080" y2="230" stroke="#F1F5F9" stroke-width="1.5"/>
48 <line x1="140" y1="150" x2="1080" y2="150" stroke="#F1F5F9" stroke-width="1.5"/>
49 <!-- Y-Axis Labels -->
50 <text x="120" y="555" font-size="13" font-weight="600" fill="#64748B" text-anchor="end">0</text>
51 <text x="120" y="475" font-size="13" font-weight="600" fill="#64748B" text-anchor="end">100</text>
52 <text x="120" y="395" font-size="13" font-weight="600" fill="#64748B" text-anchor="end">200</text>
53 <text x="120" y="315" font-size="13" font-weight="600" fill="#64748B" text-anchor="end">300</text>
54 <text x="120" y="235" font-size="13" font-weight="600" fill="#64748B" text-anchor="end">400</text>
55 <text x="120" y="155" font-size="13" font-weight="600" fill="#64748B" text-anchor="end">500</text>
56 <!-- Main Axes Lines -->
57 <line x1="140" y1="150" x2="140" y2="550" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"/>
58 <line x1="140" y1="550" x2="1080" y2="550" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"/>
59 <!-- chart-plot-area: 140,150,1080,550 -->
60 <!-- ==================== Stacked Bars ==================== -->
61 <!-- Q1'24 (Total: 300) -->
62 <g>
63 <rect x="196" y="438" width="80" height="112" rx="4" fill="#6366F1" stroke="#FFFFFF" stroke-width="2"/>
64 <rect x="196" y="366" width="80" height="72" rx="4" fill="#0EA5E9" stroke="#FFFFFF" stroke-width="2"/>
65 <rect x="196" y="326" width="80" height="40" rx="4" fill="#10B981" stroke="#FFFFFF" stroke-width="2"/>
66 <rect x="196" y="310" width="80" height="16" rx="4" fill="#F59E0B" stroke="#FFFFFF" stroke-width="2"/>
67 </g>
68 <text x="236" y="494" font-weight="700" fill="#FFFFFF" text-anchor="middle">140</text>
69 <text x="236" y="402" font-weight="700" fill="#FFFFFF" text-anchor="middle">90</text>
70 <text x="236" y="346" font-weight="700" fill="#FFFFFF" text-anchor="middle">50</text>
71 <text x="236" y="318" font-weight="700" fill="#FFFFFF" text-anchor="middle">20</text>
72 <text x="236" y="295" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">300</text>
73 <text x="236" y="580" font-size="14" font-weight="700" fill="#475569" text-anchor="middle">Q1'24</text>
74 <!-- Q2'24 (Total: 350) -->
75 <g>
76 <rect x="388" y="422" width="80" height="128" rx="4" fill="#6366F1" stroke="#FFFFFF" stroke-width="2"/>
77 <rect x="388" y="342" width="80" height="80" rx="4" fill="#0EA5E9" stroke="#FFFFFF" stroke-width="2"/>
78 <rect x="388" y="294" width="80" height="48" rx="4" fill="#10B981" stroke="#FFFFFF" stroke-width="2"/>
79 <rect x="388" y="270" width="80" height="24" rx="4" fill="#F59E0B" stroke="#FFFFFF" stroke-width="2"/>
80 </g>
81 <text x="428" y="486" font-weight="700" fill="#FFFFFF" text-anchor="middle">160</text>
82 <text x="428" y="382" font-weight="700" fill="#FFFFFF" text-anchor="middle">100</text>
83 <text x="428" y="318" font-weight="700" fill="#FFFFFF" text-anchor="middle">60</text>
84 <text x="428" y="282" font-weight="700" fill="#FFFFFF" text-anchor="middle">30</text>
85 <text x="428" y="255" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">350</text>
86 <text x="428" y="580" font-size="14" font-weight="700" fill="#475569" text-anchor="middle">Q2'24</text>
87 <!-- Q3'24 (Total: 400) -->
88 <g>
89 <rect x="580" y="406" width="80" height="144" rx="4" fill="#6366F1" stroke="#FFFFFF" stroke-width="2"/>
90 <rect x="580" y="318" width="80" height="88" rx="4" fill="#0EA5E9" stroke="#FFFFFF" stroke-width="2"/>
91 <rect x="580" y="258" width="80" height="60" rx="4" fill="#10B981" stroke="#FFFFFF" stroke-width="2"/>
92 <rect x="580" y="230" width="80" height="28" rx="4" fill="#F59E0B" stroke="#FFFFFF" stroke-width="2"/>
93 </g>
94 <text x="620" y="478" font-weight="700" fill="#FFFFFF" text-anchor="middle">180</text>
95 <text x="620" y="362" font-weight="700" fill="#FFFFFF" text-anchor="middle">110</text>
96 <text x="620" y="288" font-weight="700" fill="#FFFFFF" text-anchor="middle">75</text>
97 <text x="620" y="244" font-weight="700" fill="#FFFFFF" text-anchor="middle">35</text>
98 <text x="620" y="215" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">400</text>
99 <text x="620" y="580" font-size="14" font-weight="700" fill="#475569" text-anchor="middle">Q3'24</text>
100 <!-- Q4'24 (Total: 450) -->
101 <g>
102 <rect x="772" y="390" width="80" height="160" rx="4" fill="#6366F1" stroke="#FFFFFF" stroke-width="2"/>
103 <rect x="772" y="294" width="80" height="96" rx="4" fill="#0EA5E9" stroke="#FFFFFF" stroke-width="2"/>
104 <rect x="772" y="222" width="80" height="72" rx="4" fill="#10B981" stroke="#FFFFFF" stroke-width="2"/>
105 <rect x="772" y="190" width="80" height="32" rx="4" fill="#F59E0B" stroke="#FFFFFF" stroke-width="2"/>
106 </g>
107 <text x="812" y="470" font-weight="700" fill="#FFFFFF" text-anchor="middle">200</text>
108 <text x="812" y="342" font-weight="700" fill="#FFFFFF" text-anchor="middle">120</text>
109 <text x="812" y="258" font-weight="700" fill="#FFFFFF" text-anchor="middle">90</text>
110 <text x="812" y="206" font-weight="700" fill="#FFFFFF" text-anchor="middle">40</text>
111 <text x="812" y="175" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">450</text>
112 <text x="812" y="580" font-size="14" font-weight="700" fill="#475569" text-anchor="middle">Q4'24</text>
113 <!-- Q1'25 (Total: 500) -->
114 <g>
115 <rect x="964" y="374" width="80" height="176" rx="4" fill="#6366F1" stroke="#FFFFFF" stroke-width="2"/>
116 <rect x="964" y="270" width="80" height="104" rx="4" fill="#0EA5E9" stroke="#FFFFFF" stroke-width="2"/>
117 <rect x="964" y="186" width="80" height="84" rx="4" fill="#10B981" stroke="#FFFFFF" stroke-width="2"/>
118 <rect x="964" y="150" width="80" height="36" rx="4" fill="#F59E0B" stroke="#FFFFFF" stroke-width="2"/>
119 </g>
120 <text x="1004" y="462" font-weight="700" fill="#FFFFFF" text-anchor="middle">220</text>
121 <text x="1004" y="322" font-weight="700" fill="#FFFFFF" text-anchor="middle">130</text>
122 <text x="1004" y="228" font-weight="700" fill="#FFFFFF" text-anchor="middle">105</text>
123 <text x="1004" y="168" font-weight="700" fill="#FFFFFF" text-anchor="middle">45</text>
124 <text x="1004" y="135" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">500</text>
125 <text x="1004" y="580" font-size="14" font-weight="700" fill="#475569" text-anchor="middle">Q1'25</text>
126 </g>
127 </g>
128 <!-- ==================== Right Insight Dashboard ==================== -->
129 <g id="dashboardPanel" data-pptx-bounds="1090 150 170 400">
130 <!-- Dashboard Background -->
131 <rect x="1090" y="150" width="170" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/>
132 <!-- Legend Header -->
133 <text x="1175" y="185" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">Revenue Categories</text>
134 <line x1="1090" y1="200" x2="1260" y2="200" stroke="#F1F5F9" stroke-width="1.5"/>
135 <!-- Series 4 (Other) -->
136 <circle cx="1110" cy="225" r="5" fill="#F59E0B"/>
137 <text x="1125" y="230" font-size="13" font-weight="700" fill="#1E293B">Other Revenue</text>
138 <rect x="1125" y="240" width="45" height="20" rx="4" fill="#FEF3C7"/>
139 <text x="1147.5" y="254" font-weight="800" fill="#D97706" text-anchor="middle">+125%</text>
140 <!-- Series 3 (Subscriptions) -->
141 <circle cx="1110" cy="285" r="5" fill="#10B981"/>
142 <text x="1125" y="290" font-size="13" font-weight="700" fill="#1E293B">Subscriptions</text>
143 <rect x="1125" y="300" width="45" height="20" rx="4" fill="#D1FAE5"/>
144 <text x="1147.5" y="314" font-weight="800" fill="#059669" text-anchor="middle">+110%</text>
145 <!-- Series 2 (Services) -->
146 <circle cx="1110" cy="345" r="5" fill="#0EA5E9"/>
147 <text x="1125" y="350" font-size="13" font-weight="700" fill="#1E293B">Services</text>
148 <rect x="1125" y="360" width="45" height="20" rx="4" fill="#E0F2FE"/>
149 <text x="1147.5" y="374" font-weight="800" fill="#0284C7" text-anchor="middle">+44%</text>
150 <!-- Series 1 (Product Sales) -->
151 <circle cx="1110" cy="405" r="5" fill="#6366F1"/>
152 <text x="1125" y="410" font-size="13" font-weight="700" fill="#1E293B">Product Sales</text>
153 <rect x="1125" y="420" width="45" height="20" rx="4" fill="#E0E7FF"/>
154 <text x="1147.5" y="434" font-weight="800" fill="#4338CA" text-anchor="middle">+57%</text>
155 <!-- AI Insight Box -->
156 <rect x="1100" y="455" width="150" height="85" rx="8" fill="#F0FDF4" stroke="#86EFAC" stroke-width="1"/>
157 <text x="1112" y="475" font-weight="800" fill="#166534">💡 Key Driver</text>
158 <text x="1112" y="495" font-weight="600" fill="#15803D">Subs &amp; Other grew<tspan x="1112" dy="15">&gt;100% YoY, boosting</tspan><tspan x="1112" dy="15">the margin structure.</tspan></text>
159 </g>
160 <!-- ==================== Footer ==================== -->
161 <g id="source" data-pptx-bounds="60 675 280 20">
162 <text x="60" y="690" font-size="13" font-weight="600" fill="#94A3B8">Data Source: Financial Reports</text>
163 </g>
164 </svg>
165
165 lines Plain Text