# 堆叠面积图生成器

生成堆叠面积图，展示多个数据系列的累积趋势，非常适合可视化总量趋势和组成部分贡献

> 标准页面: https://elysiatools.com/zh/tools/stacked-area-chart

- **分类:** Data Visualization

- **关键词:** 堆叠面积图, 图表, 可视化, 累积图表, 趋势, 数据, 生成器, 总量, 构成

## 概述

堆叠面积图生成器是一款在线数据可视化工具，能够将多组数据系列转换为堆叠面积图。它通过直观展示各部分随时间或类别的累积变化，帮助您清晰分析总量趋势与构成贡献。

## 输入项

- **图表数据** (textarea): 堆叠图表数据。支持多系列JSON用于堆叠或单系列数组
- **图表标题** (text): 显示在图表上方的标题
- **曲线类型** (select): 选择曲线类型
- **区域颜色** (text): 多个区域的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。
- **填充透明度** (text): 区域填充的透明度（0.1到1.0）
- **背景颜色** (color): 图表容器的背景颜色
- **网格线颜色** (color): 网格线的颜色
- **线条宽度** (number): 区域边界线的像素宽度
- **图表高度** (number): 图表的像素高度
- **最大值** (number): Y轴最大值（留空自动缩放）
- **最小值** (number): Y轴最小值
- **X轴标签** (text): X轴的标签
- **Y轴标签** (text): Y轴的标签
- **显示网格线** (checkbox): 显示网格线以便更好阅读
- **显示数据点** (checkbox): 在区域上显示数据点
- **在点上显示数值** (checkbox): 在数据点上显示实际数值
- **显示总计线** (checkbox): 显示累计总计的线条
- **标准化为100%** (checkbox): 将值转换为百分比显示相对贡献
- **显示图例** (checkbox): 在图表下方显示图例

## 适用场景

- 需要同时展示总量趋势及其内部组成部分变化时。
- 需要比较多个数据系列在整体中的相对贡献比例时。
- 数据具有时间序列或类别维度，且希望强调累积效果时。

## 工作原理

- 在“图表数据”输入框中，按照指定格式（多系列JSON或单系列数组）粘贴或输入您的数据。
- 根据需要，配置图表标题、曲线类型、颜色、坐标轴标签等样式选项。
- 点击生成按钮，工具将实时渲染出堆叠面积图，您可以直接查看或截图保存。

## 使用案例

- 分析不同产品线在多个季度的销售额累积贡献与市场总增长趋势。
- 可视化项目各阶段（如设计、开发、测试）的资源投入时间累积情况。
- 展示网站流量来源（如直接访问、搜索引擎、社交媒体）的构成变化趋势。

## 常见问题

### 支持哪些数据格式？

支持两种JSON格式：多系列对象（包含labels和series数组）或单系列对象数组（包含label和value键）。

### 可以自定义图表的颜色和样式吗？

可以。您可以自定义区域颜色、填充透明度、背景色、网格线颜色、线条宽度等多种样式。

### 生成的图表可以下载吗？

生成的图表以HTML形式呈现，您可以直接在浏览器中截图保存为图片。

### “标准化为100%”选项有什么作用？

启用后，每个数据点的值将被转换为占该点总和的百分比，用于展示各部分的相对构成比例，而非绝对数值。

### “显示总计线”是什么？

这是在所有堆叠系列顶部绘制的一条折线，代表每个数据点上所有系列值的总和，便于观察整体趋势。

## 相关工具

- [柱状图生成器](https://elysiatools.com/zh/tools/bar-chart-generator): 从数据生成可自定义的柱状图，支持多种样式选项
- [气泡图生成器](https://elysiatools.com/zh/tools/bubble-chart-generator): 从数据生成可自定义的气泡图，支持三个维度（X、Y、大小）的可视化
- [对比条形图生成器](https://elysiatools.com/zh/tools/comparison-bar-chart): 生成背对背条形图，用于正负值对比展示，非常适合数据集对比分析
- [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据
- [漏斗图生成器](https://elysiatools.com/zh/tools/funnel-chart-generator): 从数据生成可自定义的漏斗图，非常适合显示转化率、销售管道和流程
- [甘特图生成器](https://elysiatools.com/zh/tools/gantt-chart-generator): 创建专业甘特图，支持任务时间线、依赖关系、进度跟踪和里程碑标记
- [仪表盘图生成器](https://elysiatools.com/zh/tools/gauge-chart-generator): 从数据生成可自定义的仪表盘图（速度计图），非常适合显示KPI、指标和性能数据
- [热力图生成器](https://elysiatools.com/zh/tools/heatmap-generator): 从数据生成可自定义的热力图，非常适合可视化数据密度、相关性和模式

## 示例

- [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
- [D3.js 数据可视化示例](https://elysiatools.com/zh/samples/d3js-data-visualization): 全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
- [Terraform Plan JSON 样本](https://elysiatools.com/zh/samples/terraform-plan-json-samples): 用于依赖可视化和变更审查的 Terraform plan JSON 文件样本，贴近 terraform show -json 输出结构
- [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像