分类

← View All Tools

堆叠面积图生成器

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

堆叠图表数据。支持多系列JSON用于堆叠或单系列数组

显示在图表上方的标题

多个区域的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。

区域填充的透明度（0.1到1.0）

图表容器的背景颜色

网格线的颜色

区域边界线的像素宽度

图表的像素高度

Y轴最大值（留空自动缩放）

Y轴最小值

X轴的标签

Y轴的标签

显示网格线以便更好阅读

在区域上显示数据点

在数据点上显示实际数值

显示累计总计的线条

将值转换为百分比显示相对贡献

在图表下方显示图例

关键信息

分类
Data Visualization
输入类型
textarea, text, select, color, number, checkbox
输出类型
html
样本覆盖
4
支持 API
Yes

概览

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

适用场景

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

工作原理

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

使用场景

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

用户案例

1. 季度市场趋势分析

市场分析师
背景原因
分析师需要向管理层展示过去一年四个季度中，公司三条主要产品线（A、B、C）的销售额如何共同推动总营收增长。
解决问题
需要一张图同时显示总营收的上升趋势，以及每条产品线在其中的贡献份额变化。
如何使用
将包含季度标签和三个产品系列销售额的JSON数据粘贴到“图表数据”框中。设置图表标题为“年度产品营收构成趋势”，并选择平滑曲线。
效果
生成一张堆叠面积图，清晰显示总营收的累积增长曲线，以及A、B、C产品线各自填充的面积，直观呈现了各季度的构成变化。

2. 项目资源投入跟踪

项目经理
背景原因
项目经理正在监控一个为期六个月的项目，需要跟踪设计、开发、测试三个团队每周的人力投入工时。
解决问题
需要可视化每周总工时的波动，并了解各团队在不同阶段的工作量分布。
如何使用
准备以周为标签，包含三个团队工时数据的JSON。启用“显示总计线”以观察总工时趋势，并自定义三种不同的区域颜色以区分团队。
效果
生成的图表展示了每周总工时的堆叠面积，以及顶部的总计折线。项目经理可以一目了然地看到开发阶段（中期）的面积最厚，以及各团队的投入衔接情况。

用 Samples 测试

json
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
json
D3.js 数据可视化示例
全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
preferred input family json
json
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json

相关专题

JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
Json 工具专题
探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。
JsonFormat工具专题
探索 6 个围绕 json 的 format 工作流工具，快速找到相近能力。

常见问题

支持哪些数据格式？

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

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

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

生成的图表可以下载吗？

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

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

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

“显示总计线”是什么？

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

API 文档

请求端点

POST /zh/api/tools/stacked-area-chart

请求参数

参数名 类型 必填 描述
chartData textarea 是 堆叠图表数据。支持多系列JSON用于堆叠或单系列数组
chartTitle text 否 显示在图表上方的标题
curveType select 否 -
areaColors text 否 多个区域的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。
fillOpacity text 否 区域填充的透明度（0.1到1.0）
backgroundColor color 否 图表容器的背景颜色
gridColor color 否 网格线的颜色
lineWidth number 否 区域边界线的像素宽度
chartHeight number 否 图表的像素高度
maxValue number 否 Y轴最大值（留空自动缩放）
minValue number 否 Y轴最小值
xAxisLabel text 否 X轴的标签
yAxisLabel text 否 Y轴的标签
showGrid checkbox 否 显示网格线以便更好阅读
showPoints checkbox 否 在区域上显示数据点
showValues checkbox 否 在数据点上显示实际数值
showTotalLine checkbox 否 显示累计总计的线条
normalizeData checkbox 否 将值转换为百分比显示相对贡献
showLegend checkbox 否 在图表下方显示图例

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-stacked-area-chart": {
      "name": "stacked-area-chart",
      "description": "生成堆叠面积图，展示多个数据系列的累积趋势，非常适合可视化总量趋势和组成部分贡献",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stacked-area-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]