分类

← View All Tools

河流图生成器

生成流畅的河流图，用于可视化时间序列数据流动，非常适合展示随时间变化的构成，具有有机的流动形状

河流图的时间序列数据。每个系列代表随时间流动的层。

显示在图表上方的标题

河流的自定义颜色（逗号分隔的十六进制颜色）。如果提供，将覆盖配色方案。

河流图层的透明度（0.1到1.0）

河流曲线的平滑度（0.1到1.0，越高越平滑）

图表容器的背景颜色

网格线的颜色

图表的像素高度

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

Y轴最小值

X轴的标签（通常是时间）

Y轴的标签

显示网格线以便更好阅读

在河流图层内显示数值

在关键点显示数据标签

将值转换为百分比显示随时间的相对贡献

在图表下方显示图例

关键信息

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

概览

河流图生成器是一款用于创建流畅、有机形状河流图的在线工具。它专门设计用于可视化时间序列数据的流动与构成变化，通过平滑的曲线直观展示多个数据系列随时间推移的相对贡献和趋势演变。

适用场景

  • •需要分析并展示多个类别数据（如网站流量来源、产品销售额构成）随时间变化的趋势时。
  • •希望以比传统折线图或堆叠面积图更美观、更具流动感的方式呈现时序数据的构成比例时。
  • •在报告或演示中，需要一张能清晰传达“此消彼长”动态过程的可视化图表时。

工作原理

  • •准备数据：将您的时间序列数据整理为指定的JSON格式，包含时间标签和多个数据系列。
  • •配置样式：根据需要选择配色方案、调整河流透明度与曲线平滑度，并设置标题、坐标轴等图表元素。
  • •生成图表：工具将根据您的数据和配置，实时渲染出交互式的河流图，您可以直接查看或嵌入使用。

使用场景

网站分析：可视化不同流量渠道（直接访问、搜索引擎、社交媒体等）每月带来的用户会话数变化。
财务预算：展示各部门或项目在一年中各季度的预算分配与消耗情况对比。
能源监控：呈现一天中不同时段各类能源（太阳能、风能、电网）的发电量构成流动。

用户案例

1. 网站流量来源趋势分析

数字营销分析师
背景原因
分析师需要向团队展示过去半年各主要流量渠道的贡献变化，以评估营销策略效果。
解决问题
使用传统堆叠图难以直观看出各渠道份额的“流动”和相互替代关系。
如何使用
将月度渠道会话数据整理成JSON格式输入，选择“极光”配色方案以增强视觉区分度，并开启数据标签显示具体数值。
示例配置
{
  "labels": ["1月", "2月", "3月", "4月", "5月", "6月"],
  "series": [
    {"name": "直接访问", "data": [1500, 1600, 1550, 1700, 1800, 1900]},
    {"name": "搜索引擎", "data": [3000, 3200, 3500, 3300, 3100, 3400]},
    {"name": "社交媒体", "data": [800, 950, 1200, 1500, 1800, 2100]},
    {"name": "引荐流量", "data": [500, 480, 520, 490, 510, 530]}
  ]
}
效果
生成一张流畅的河流图，清晰显示社交媒体流量占比逐月稳步增长，而搜索引擎流量相对稳定，直观呈现了流量结构的动态变化。

2. 季度预算分配流动视图

背景原因
项目经理需要跟踪三个核心项目在四个季度的预算分配与执行情况。
解决问题
表格数据无法生动体现预算资源在不同项目间的流动和重点转移。
如何使用
输入按项目和季度划分的预算数据JSON，启用“标准化为100%”选项以聚焦比例变化，并将曲线平滑度调至0.8以获得更柔和的视觉效果。
效果
图表以百分比形式展示了每个季度预算在不同项目间的分配比例流动，帮助管理者快速识别资源倾斜的重点和时段。

用 Samples 测试

data-visualization
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
keywords time,series,data
sample
Chart.js 图表库示例
全面的Chart.js示例，包括各种图表类型、自定义选项、动画和响应式设计
keywords graph,chart,data
sample
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
keywords time,data
sample
服务器发送事件 (SSE)
服务器发送事件示例，用于从服务器到客户端的单向实时通信，包括实时更新、通知和流式数据
keywords stream,time,data
sample

相关专题

JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
DesignGenerate工具专题
探索 19 个围绕 design 的 generate 工作流工具，快速找到相近能力。
PdfGenerate工具专题
探索 10 个围绕 pdf 的 generate 工作流工具，快速找到相近能力。
AudioGenerate工具专题
探索 8 个围绕 audio 的 generate 工作流工具，快速找到相近能力。

常见问题

输入数据必须是什么格式？

必须是包含“labels”（时间点数组）和“series”（数据系列数组）的JSON对象。每个系列需要“name”和“data”字段。

这个工具是免费的吗？

是的，这是一个完全免费的在线工具，无需注册即可使用。

生成的图表可以导出为图片吗？

目前工具主要提供交互式HTML图表。您可以通过浏览器截图功能或开发者工具来保存静态图像。

有哪些预设的配色方案？

提供多种方案，包括默认（海洋蓝）、日落（暖色调）、森林（绿色系）、极光、珊瑚礁和单色。您也可以使用自定义颜色覆盖。

如何让曲线更平滑或更尖锐？

通过调整“曲线平滑度”参数（0.1到1.0）。值越高，曲线过渡越平滑柔和；值越低，曲线越贴近数据点，形状更尖锐。

API 文档

请求端点

POST /zh/api/tools/stream-graph

请求参数

参数名 类型 必填 描述
chartData textarea 是 河流图的时间序列数据。每个系列代表随时间流动的层。
chartTitle text 否 显示在图表上方的标题
colorScheme select 否 -
streamColors text 否 河流的自定义颜色（逗号分隔的十六进制颜色）。如果提供，将覆盖配色方案。
streamOpacity number 否 河流图层的透明度（0.1到1.0）
curveSmoothness number 否 河流曲线的平滑度（0.1到1.0，越高越平滑）
backgroundColor color 否 图表容器的背景颜色
gridColor color 否 网格线的颜色
chartHeight number 否 图表的像素高度
maxValue number 否 Y轴最大值（留空自动缩放）
minValue number 否 Y轴最小值
xAxisLabel text 否 X轴的标签（通常是时间）
yAxisLabel text 否 Y轴的标签
showGrid checkbox 否 显示网格线以便更好阅读
showValues checkbox 否 在河流图层内显示数值
showDataLabels 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-stream-graph": {
      "name": "stream-graph",
      "description": "生成流畅的河流图，用于可视化时间序列数据流动，非常适合展示随时间变化的构成，具有有机的流动形状",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stream-graph",
      "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]