# 范围图生成器

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

> 标准页面: https://elysiatools.com/zh/tools/range-chart-generator

- **分类:** Data Visualization

- **关键词:** 范围图, 最小最大值图, 误差线, 置信区间, 价格波动, 温度范围, 波动性

## 概述

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

## 输入项

- **图表标题** (text): 显示在范围图上方的标题
- **数据范围** (textarea): JSON数组格式的数据范围，包含最小值、最大值和可选的中位数、平均值、异常值
- **X轴标签** (text): X轴的标签
- **Y轴标签** (text): Y轴的标签
- **范围样式** (select): 选择范围样式
- **范围颜色** (color): 范围可视化的主色调
- **中位数颜色** (color): 中位数标记的颜色
- **平均数点颜色** (color): 平均数点标记的颜色
- **异常值颜色** (color): 异常值点的颜色
- **线条颜色** (color): 范围线条的颜色（如适用）
- **线条宽度** (number): 范围线的像素宽度
- **数据点大小** (number): 最小/最大数据点的像素大小
- **异常值点大小** (number): 异常值点的像素大小
- **范围透明度** (number): 范围填充的透明度级别（0.0-1.0）
- **显示中位数** (checkbox): 在范围上显示中位数标记
- **显示平均数** (checkbox): 显示平均数点标记
- **显示异常值** (checkbox): 显示异常值数据点
- **显示最小/最大点** (checkbox): 显示最小和最大数据点
- **显示网格** (checkbox): 显示背景网格线
- **网格颜色** (color): 网格线的颜色
- **背景颜色** (color): 图表的背景颜色
- **图表宽度** (number): 图表的像素宽度
- **图表高度** (number): 图表的像素高度
- **数值格式** (select): 选择格式
- **字体大小** (number): 标签和文本的字体大小
- **标题字体大小** (number): 图表标题的字体大小
- **字体系列** (text): 文本元素的字体族
- **启用动画** (checkbox): 加载时动画显示图表
- **动画时长** (number): 动画持续时间（毫秒）

## 适用场景

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

## 工作原理

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

## 使用案例

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

## 常见问题

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

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

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

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

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

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

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

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

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

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

## 相关工具

- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据
- [漏斗图生成器](https://elysiatools.com/zh/tools/funnel-chart-generator): 从数据生成可自定义的漏斗图，非常适合显示转化率、销售管道和流程
- [OpenAPI 转 Postman Collection](https://elysiatools.com/zh/tools/openapi-to-postman-collection): 把 OpenAPI 3.x 或 Swagger 2.0 规范（JSON/YAML）转成可直接导入的 Postman Collection v2.1.0，含文件夹、变量、认证与示例响应。
- [象形图生成器](https://elysiatools.com/zh/tools/pictograph-generator): 使用图标/符号创建象形图来表示数量，支持自定义图标、颜色和布局
- [雷达图生成器](https://elysiatools.com/zh/tools/radar-chart-generator): 从数据生成可自定义的雷达图（蜘蛛图），非常适合多维度对比和分析
- [瀑布图生成器](https://elysiatools.com/zh/tools/waterfall-chart-generator): 创建瀑布图来可视化累积变化，支持正负值区分和汇总显示
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶

## 示例

- [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像
- [分布式追踪示例](https://elysiatools.com/zh/samples/distributed-tracing-samples): 使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构
- [ELK Stack 日志分析示例](https://elysiatools.com/zh/samples/elk-stack-samples): 全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
- [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发