| 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', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Stacked Area Chart Template |
| 6 | Purpose: Multi-series cumulative trends and composition changes |
| 7 | Use cases: Revenue breakdown, traffic sources, market share |
| 8 | Feature: Mathematically precise stacking, gradient ribbons, 5-card dashboard |
| 9 | --> |
| 10 | <!-- Background --> |
| 11 | <rect width="1280" height="720" fill="#F8FAFC"/> |
| 12 | <!-- ==================== Header ==================== --> |
| 13 | <g id="header" data-pptx-bounds="60 30 560 70"> |
| 14 | <text x="60" y="60" font-size="32" font-weight="800" fill="#0F172A">Revenue Composition Trend</text> |
| 15 | <text x="60" y="90" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1">2025 MONTHLY DATA · UNIT: $M</text> |
| 16 | </g> |
| 17 | <!-- ==================== Legend ==================== --> |
| 18 | <g id="legend" data-pptx-bounds="680 55 500 24" transform="translate(680, 60)" |
| 19 | font-size="14" font-weight="600" fill="#64748B"> |
| 20 | <rect x="0" y="0" width="12" height="12" rx="3" fill="#6366F1"/> |
| 21 | <text x="20" y="11">Subscription</text> |
| 22 | <rect x="130" y="0" width="12" height="12" rx="3" fill="#0EA5E9"/> |
| 23 | <text x="150" y="11">Advertising</text> |
| 24 | <rect x="250" y="0" width="12" height="12" rx="3" fill="#10B981"/> |
| 25 | <text x="270" y="11">Value-Added</text> |
| 26 | <rect x="380" y="0" width="12" height="12" rx="3" fill="#F59E0B"/> |
| 27 | <text x="400" y="11">Other</text> |
| 28 | </g> |
| 29 | <!-- ==================== Chart Area ==================== --> |
| 30 | <g id="stacked_area_chart" data-pptx-bounds="60 140 1120 450" data-pptx-replace-with="chart"> |
| 31 | <metadata type="application/json"> |
| 32 | { |
| 33 | "name": "stacked_area_chart", |
| 34 | "x": 85, |
| 35 | "y": 150, |
| 36 | "width": 1095, |
| 37 | "height": 433.25, |
| 38 | "type": "area", |
| 39 | "grouping": "stacked", |
| 40 | "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], |
| 41 | "series": [ |
| 42 | {"name": "Subscription", "values": [45, 48, 52, 55, 58, 62, 68, 72, 70, 68, 75, 82]}, |
| 43 | {"name": "Advertising", "values": [25, 28, 30, 32, 35, 38, 42, 45, 43, 40, 45, 50]}, |
| 44 | {"name": "Value-Added", "values": [15, 16, 18, 20, 22, 25, 28, 30, 28, 26, 30, 35]}, |
| 45 | {"name": "Other", "values": [8, 8, 10, 10, 12, 12, 15, 15, 14, 14, 15, 18]} |
| 46 | ], |
| 47 | "style": {"colors": ["#6366F1", "#0EA5E9", "#10B981", "#F59E0B"]} |
| 48 | } |
| 49 | </metadata> |
| 50 | <g id="chartArea"> |
| 51 | <!-- Vertical Grid Lines (Months) --> |
| 52 | <g id="vertical-grid" stroke="#F1F5F9" stroke-width="1.5"> |
| 53 | <line x1="145" y1="160" x2="145" y2="550"/> |
| 54 | <line x1="235" y1="160" x2="235" y2="550"/> |
| 55 | <line x1="325" y1="160" x2="325" y2="550"/> |
| 56 | <line x1="415" y1="160" x2="415" y2="550"/> |
| 57 | <line x1="505" y1="160" x2="505" y2="550"/> |
| 58 | <line x1="595" y1="160" x2="595" y2="550"/> |
| 59 | <line x1="685" y1="160" x2="685" y2="550"/> |
| 60 | <line x1="775" y1="160" x2="775" y2="550"/> |
| 61 | <line x1="865" y1="160" x2="865" y2="550"/> |
| 62 | <line x1="955" y1="160" x2="955" y2="550"/> |
| 63 | <line x1="1045" y1="160" x2="1045" y2="550"/> |
| 64 | <line x1="1135" y1="160" x2="1135" y2="550"/> |
| 65 | </g> |
| 66 | <!-- Horizontal Grid Lines --> |
| 67 | <g id="horizontal-grid" stroke="#F1F5F9" stroke-width="1.5"> |
| 68 | <line x1="100" y1="550" x2="1180" y2="550" stroke="#E2E8F0"/> |
| 69 | <line x1="100" y1="460" x2="1180" y2="460"/> |
| 70 | <line x1="100" y1="370" x2="1180" y2="370"/> |
| 71 | <line x1="100" y1="280" x2="1180" y2="280"/> |
| 72 | <line x1="100" y1="190" x2="1180" y2="190"/> |
| 73 | </g> |
| 74 | <!-- Y-Axis Labels --> |
| 75 | <g id="value-labels" font-size="13" font-weight="600" fill="#64748B" text-anchor="end"> |
| 76 | <text x="85" y="555">0</text> |
| 77 | <text x="85" y="465">50</text> |
| 78 | <text x="85" y="375">100</text> |
| 79 | <text x="85" y="285">150</text> |
| 80 | <text x="85" y="195">200</text> |
| 81 | </g> |
| 82 | <!-- Main Axes Lines --> |
| 83 | <g id="axes" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"> |
| 84 | <line x1="100" y1="150" x2="100" y2="550"/> |
| 85 | <line x1="100" y1="550" x2="1180" y2="550"/> |
| 86 | </g> |
| 87 | <!-- X-Axis Labels --> |
| 88 | <g id="category-labels" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle"> |
| 89 | <text x="145" y="580">Jan</text> |
| 90 | <text x="235" y="580">Feb</text> |
| 91 | <text x="325" y="580">Mar</text> |
| 92 | <text x="415" y="580">Apr</text> |
| 93 | <text x="505" y="580">May</text> |
| 94 | <text x="595" y="580">Jun</text> |
| 95 | <text x="685" y="580">Jul</text> |
| 96 | <text x="775" y="580">Aug</text> |
| 97 | <text x="865" y="580">Sep</text> |
| 98 | <text x="955" y="580">Oct</text> |
| 99 | <text x="1045" y="580">Nov</text> |
| 100 | <text x="1135" y="580">Dec</text> |
| 101 | </g> |
| 102 | <!-- chart-plot-area: 100,150,1180,550 --> |
| 103 | <!-- ==================== Stacked Areas ==================== --> |
| 104 | <!-- Series 4: Other (Amber - Top) --> |
| 105 | <g id="stacked-areas" fill-opacity="0.68"> |
| 106 | <path d="M 145,550 L 145,382.6 L 235,370 L 325,352 L 415,339.4 L 505,321.4 L 595,303.4 L 685,274.6 L 775,258.4 L 865,271 L 955,283.6 L 1045,253 L 1135,217 L 1135,249.4 L 1045,280 L 955,308.8 L 865,296.2 L 775,285.4 L 685,301.6 L 595,325 L 505,343 L 415,357.4 L 325,370 L 235,384.4 L 145,397 Z" fill="#F59E0B"/> |
| 107 | <!-- Series 3: Value-Added (Emerald) --> |
| 108 | <path d="M 145,550 L 145,397 L 235,384.4 L 325,370 L 415,357.4 L 505,343 L 595,325 L 685,301.6 L 775,285.4 L 865,296.2 L 955,308.8 L 1045,280 L 1135,249.4 L 1135,312.4 L 1045,334 L 955,355.6 L 865,346.6 L 775,339.4 L 685,352 L 595,370 L 505,382.6 L 415,393.4 L 325,402.4 L 235,413.2 L 145,424 Z" fill="#10B981"/> |
| 109 | <!-- Series 2: Advertising (Sky) --> |
| 110 | <path d="M 145,550 L 145,424 L 235,413.2 L 325,402.4 L 415,393.4 L 505,382.6 L 595,370 L 685,352 L 775,339.4 L 865,346.6 L 955,355.6 L 1045,334 L 1135,312.4 L 1135,402.4 L 1045,415 L 955,427.6 L 865,424 L 775,420.4 L 685,427.6 L 595,438.4 L 505,445.6 L 415,451 L 325,456.4 L 235,463.6 L 145,469 Z" fill="#0EA5E9"/> |
| 111 | <!-- Series 1: Subscription (Indigo - Bottom) --> |
| 112 | <path d="M 145,550 L 145,469 L 235,463.6 L 325,456.4 L 415,451 L 505,445.6 L 595,438.4 L 685,427.6 L 775,420.4 L 865,424 L 955,427.6 L 1045,415 L 1135,402.4 L 1135,550 Z" fill="#6366F1"/> |
| 113 | </g> |
| 114 | <!-- Top Border Strokes for Definition --> |
| 115 | <g id="series-borders" fill="none" stroke-width="2"> |
| 116 | <path d="M 145,382.6 L 235,370 L 325,352 L 415,339.4 L 505,321.4 L 595,303.4 L 685,274.6 L 775,258.4 L 865,271 L 955,283.6 L 1045,253 L 1135,217" stroke="#F59E0B"/> |
| 117 | <path d="M 145,397 L 235,384.4 L 325,370 L 415,357.4 L 505,343 L 595,325 L 685,301.6 L 775,285.4 L 865,296.2 L 955,308.8 L 1045,280 L 1135,249.4" stroke="#10B981"/> |
| 118 | <path d="M 145,424 L 235,413.2 L 325,402.4 L 415,393.4 L 505,382.6 L 595,370 L 685,352 L 775,339.4 L 865,346.6 L 955,355.6 L 1045,334 L 1135,312.4" stroke="#0EA5E9"/> |
| 119 | <path d="M 145,469 L 235,463.6 L 325,456.4 L 415,451 L 505,445.6 L 595,438.4 L 685,427.6 L 775,420.4 L 865,424 L 955,427.6 L 1045,415 L 1135,402.4" stroke="#6366F1"/> |
| 120 | </g> |
| 121 | </g> |
| 122 | </g> |
| 123 | <!-- ==================== Annotation (December Peak) ==================== --> |
| 124 | <g id="annotation" data-pptx-bounds="1030 140 105 78"> |
| 125 | <rect x="1030" y="140" width="100" height="55" rx="8" fill="#1E293B"/> |
| 126 | <text x="1080" y="162" font-weight="700" fill="#94A3B8" text-anchor="middle">Peak Month</text> |
| 127 | <text x="1080" y="182" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">185M</text> |
| 128 | <path d="M 1075,195 L 1085,195 L 1080,202 Z" fill="#1E293B"/> |
| 129 | <line x1="1080" y1="202" x2="1135" y2="215" stroke="#1E293B" stroke-width="2" stroke-dasharray="2,2"/> |
| 130 | </g> |
| 131 | <!-- ==================== Statistics Dashboard Cards ==================== --> |
| 132 | <g id="statsCards" data-pptx-bounds="60 610 1160 80"> |
| 133 | <!-- Card 1: Subscription --> |
| 134 | <rect x="60" y="610" width="216" height="80" rx="10" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1.5"/> |
| 135 | <circle cx="85" cy="635" r="5" fill="#6366F1"/> |
| 136 | <text x="100" y="640" font-size="14" font-weight="700" fill="#3730A3">Subscription</text> |
| 137 | <text x="85" y="670" font-size="24" font-weight="800" fill="#312E81">755M</text> |
| 138 | <rect x="190" y="652" width="75" height="22" rx="11" fill="#E0E7FF"/> |
| 139 | <text x="227.5" y="667" font-weight="800" fill="#4338CA" text-anchor="middle">48.5%</text> |
| 140 | <!-- Card 2: Advertising --> |
| 141 | <rect x="296" y="610" width="216" height="80" rx="10" fill="#F0F9FF" stroke="#BAE6FD" stroke-width="1.5"/> |
| 142 | <circle cx="321" cy="635" r="5" fill="#0EA5E9"/> |
| 143 | <text x="336" y="640" font-size="14" font-weight="700" fill="#0369A1">Advertising</text> |
| 144 | <text x="321" y="670" font-size="24" font-weight="800" fill="#0C4A6E">453M</text> |
| 145 | <rect x="426" y="652" width="75" height="22" rx="11" fill="#E0F2FE"/> |
| 146 | <text x="463.5" y="667" font-weight="800" fill="#0284C7" text-anchor="middle">29.1%</text> |
| 147 | <!-- Card 3: Value-Added --> |
| 148 | <rect x="532" y="610" width="216" height="80" rx="10" fill="#ECFDF5" stroke="#A7F3D0" stroke-width="1.5"/> |
| 149 | <circle cx="557" cy="635" r="5" fill="#10B981"/> |
| 150 | <text x="572" y="640" font-size="14" font-weight="700" fill="#047857">Value-Added</text> |
| 151 | <text x="557" y="670" font-size="24" font-weight="800" fill="#064E3B">293M</text> |
| 152 | <rect x="662" y="652" width="75" height="22" rx="11" fill="#D1FAE5"/> |
| 153 | <text x="699.5" y="667" font-weight="800" fill="#059669" text-anchor="middle">18.8%</text> |
| 154 | <!-- Card 4: Other --> |
| 155 | <rect x="768" y="610" width="216" height="80" rx="10" fill="#FFFBEB" stroke="#FDE68A" stroke-width="1.5"/> |
| 156 | <circle cx="793" cy="635" r="5" fill="#F59E0B"/> |
| 157 | <text x="808" y="640" font-size="14" font-weight="700" fill="#B45309">Other</text> |
| 158 | <text x="793" y="670" font-size="24" font-weight="800" fill="#78350F">56M</text> |
| 159 | <rect x="898" y="652" width="75" height="22" rx="11" fill="#FEF3C7"/> |
| 160 | <text x="935.5" y="667" font-weight="800" fill="#D97706" text-anchor="middle">3.6%</text> |
| 161 | <!-- Card 5: Total Revenue --> |
| 162 | <rect x="1004" y="610" width="216" height="80" rx="10" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1.5"/> |
| 163 | <circle cx="1029" cy="635" r="5" fill="#64748B"/> |
| 164 | <text x="1044" y="640" font-size="14" font-weight="700" fill="#334155">Total Revenue</text> |
| 165 | <text x="1029" y="670" font-size="24" font-weight="800" fill="#0F172A">1,557M</text> |
| 166 | <rect x="1134" y="652" width="75" height="22" rx="11" fill="#D1FAE5"/> |
| 167 | <text x="1171.5" y="667" font-weight="800" fill="#059669" text-anchor="middle">+11.2%</text> |
| 168 | </g> |
| 169 | <!-- ==================== Footer ==================== --> |
| 170 | <g id="source" data-pptx-bounds="940 690 280 20"> |
| 171 | <text x="1220" y="705" font-size="13" font-weight="600" fill="#94A3B8" text-anchor="end">Data Source: Finance Department</text> |
| 172 | </g> |
| 173 | </svg> |
| 174 |