分类

← View All Tools

范围图生成器

创建范围图来可视化最小值-最大值范围，支持中位数标记和异常值检测

JSON数组格式的数据范围，包含最小值、最大值和可选的中位数、平均值、异常值

显示在范围图上方的标题

X轴的标签

Y轴的标签

范围可视化的主色调

中位数标记的颜色

平均数点标记的颜色

异常值点的颜色

范围线条的颜色（如适用）

范围线的像素宽度

最小/最大数据点的像素大小

异常值点的像素大小

范围填充的透明度级别（0.0-1.0）

在范围上显示中位数标记

显示平均数点标记

显示异常值数据点

显示最小和最大数据点

显示背景网格线

网格线的颜色

图表的背景颜色

图表的像素宽度

图表的像素高度

标签和文本的字体大小

图表标题的字体大小

文本元素的字体族

加载时动画显示图表

动画持续时间（毫秒）

关键信息

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

概览

范围图生成器是一款数据可视化工具，用于创建清晰展示数据最小值与最大值波动范围的图表。它支持在图表上标记中位数、平均数，并能突出显示异常值，帮助您直观分析数据的分布、集中趋势和离散程度。

适用场景

  • •需要对比多个类别（如产品、地区、时间段）的数据波动范围时。
  • •分析价格、温度、性能指标等具有最小值和最大值的数据集时。
  • •希望在展示数据范围的同时，直观地标记出中位数、平均值或异常值时。

工作原理

  • •在“数据范围”输入框中，按照指定的JSON格式提供数据，包括每个类别的标签、最小值、最大值，以及可选的中位数、平均值和异常值列表。
  • •根据需要配置图表样式，例如选择范围的可视化形式（线条、柱状或区域）、设置颜色、调整尺寸以及决定是否显示中位数、平均值等标记。
  • •点击生成按钮，工具将根据您的输入和配置，即时渲染出一幅交互式的范围图，您可以直接查看或下载使用。

使用场景

金融市场分析：可视化不同股票或资产在一段时间内的价格波动范围（最高价与最低价），并标记收盘价中位数。
气象数据展示：展示不同城市或月份的温度变化范围（最低温与最高温），并标出平均温度点。
产品质量控制：对比不同生产线或批次产品的关键尺寸测量值范围，识别是否存在超出规格的异常值。

用户案例

1. 季度产品价格波动分析

市场分析师
背景原因
分析师需要向管理层汇报过去四个季度三款核心产品的市场价格波动情况，以评估市场稳定性和定价策略。
解决问题
需要一张图同时清晰展示每款产品每个季度的价格区间（最低成交价到最高成交价），并能看出价格的中位水平。
如何使用
在“数据范围”中输入包含产品、季度、最低价、最高价和中位价的JSON数据。选择“线条”样式以清晰显示范围端点，并启用“显示中位数”标记。
示例配置
[{"label": "产品A-Q1", "min": 98, "max": 125, "median": 112}, {"label": "产品A-Q2", "min": 95, "max": 130, "median": 115}, {"label": "产品B-Q1", "min": 200, "max": 240, "median": 218}, {"label": "产品B-Q2", "min": 195, "max": 250, "median": 220}]
效果
生成一张包含四个数据点的范围图，每个点用垂直线表示价格范围，线中间的菱形标记指示中位价格，直观对比了不同产品和季度的价格波动幅度与中心趋势。

2. 城市月度气温范围对比

气象爱好者
背景原因
爱好者收集了北京和上海过去一年每月的平均最高气温和最低气温数据，想制作一张图表进行对比。
解决问题
需要将两个城市12个月的气温范围并排展示，以便一目了然地看出哪个城市月内温差更大，以及整体温度高低。
如何使用
将整理好的两地月度气温数据（包含月份、最低温、最高温）格式化为JSON。选择“柱状”样式以填充范围区域，并设置不同的范围颜色以区分城市。
示例配置
[{"label": "北京-1月", "min": -10, "max": 2}, {"label": "上海-1月", "min": 0, "max": 8}, {"label": "北京-7月", "min": 22, "max": 33}, {"label": "上海-7月", "min": 25, "max": 34}]
效果
生成一张柱状范围图，北京和上海同月份的数据相邻排列，通过不同颜色的矩形柱高度直观展示了每月的温差范围，便于直接比较两地的气候特征。

用 Samples 测试

json, text, barcode
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json
十六进制/Unicode转换样本
十六进制和Unicode转义序列转换的测试样本
preferred input family json
json
JWT 示例
从基础令牌结构到高级安全实现的全面JWT示例
preferred input family json
json
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json

相关专题

JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
TextConvert工具专题
探索 80 个围绕 text 的 convert 工作流工具，快速找到相近能力。
BarcodeConvert工具专题
探索 6 个围绕 barcode 的 convert 工作流工具，快速找到相近能力。
Json 工具专题
探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。

常见问题

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

必须是有效的JSON数组。每个数组元素是一个对象，至少包含“label”、“min”和“max”键，还可以包含“median”、“mean”和“outliers”等可选键。

图表可以显示哪些额外的数据标记？

除了最小值和最大值范围，您可以选择显示中位数标记、平均数点以及异常值散点。

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

可以。您可以分别设置范围、中位数、平均数、异常值、线条、网格和背景的颜色，以及调整线条宽度、数据点大小和透明度等。

这个图表最适合展示什么类型的数据？

最适合展示具有明确上下限的数据，如每日温度范围、股票价格波动区间、产品性能测试结果范围、不同组别的测量值差异等。

生成的图表是静态图片还是交互式图表？

生成的是基于HTML的交互式图表，您可以将鼠标悬停在数据点上查看具体数值。

API 文档

请求端点

POST /zh/api/tools/range-chart-generator

请求参数

参数名 类型 必填 描述
chartTitle text 否 显示在范围图上方的标题
dataRanges textarea 是 JSON数组格式的数据范围，包含最小值、最大值和可选的中位数、平均值、异常值
xAxisLabel text 否 X轴的标签
yAxisLabel text 否 Y轴的标签
rangeStyle select 是 -
rangeColor color 否 范围可视化的主色调
medianColor color 否 中位数标记的颜色
pointColor color 否 平均数点标记的颜色
outlierColor color 否 异常值点的颜色
lineColor color 否 范围线条的颜色（如适用）
lineWidth number 否 范围线的像素宽度
pointSize number 否 最小/最大数据点的像素大小
outlierSize number 否 异常值点的像素大小
opacity number 否 范围填充的透明度级别（0.0-1.0）
showMedian checkbox 否 在范围上显示中位数标记
showMean checkbox 否 显示平均数点标记
showOutliers checkbox 否 显示异常值数据点
showDataPoints checkbox 否 显示最小和最大数据点
showGrid checkbox 否 显示背景网格线
gridColor color 否 网格线的颜色
backgroundColor color 否 图表的背景颜色
chartWidth number 否 图表的像素宽度
chartHeight number 否 图表的像素高度
valueFormat select 否 -
fontSize number 否 标签和文本的字体大小
titleSize number 否 图表标题的字体大小
fontFamily text 否 文本元素的字体族
animationEnabled checkbox 否 加载时动画显示图表
animationDuration number 否 动画持续时间（毫秒）

响应格式

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

AI MCP 文档

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

{
  "mcpServers": {
    "elysiatools-range-chart-generator": {
      "name": "range-chart-generator",
      "description": "创建范围图来可视化最小值-最大值范围，支持中位数标记和异常值检测",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=range-chart-generator",
      "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]