数值用于可度量的视觉通道（坐标、大小、颜色强度等），字符串用于分类标签、图例名称等标识性角色；二者须严格区分，混用会导致图表错位或渲染失败。
在 JavaScript 数据可视化中，数值与字符串的映射不是简单的类型转换，而是决定“数据如何被视觉呈现”的关键环节。核心在于：**数值参与坐标、长度、大小、颜色强度等可度量的视觉通道；字符串则主要承担分类标签、图例名称、分组标识或时间语义（需解析后转为时间戳）等角色。两者必须按用途严格区分，混用会导致图表错位、轴线混乱甚至渲染失败。**
数值必须用于可计算的视觉属性
柱高、折线点纵坐标、饼图角度、散点横纵位置、气泡半径——这些都依赖数值的大小关系和比例。D3.js 的 scaleLinear()、Chart.js 的 yAxes.ticks.beginAtZero 或 ECharts 的 valueAxis 都基于数值域（domain）到像素域（range）的映射。
- 原始数据中的空值（
null、undefined）、非数字字符串（如"N/A"、"--"）必须提前清洗，否则 scale 会返回NaN，导致图形消失 - 时间类数值（如
1724200000000）需显式转为Date对象，才能被时间轴正确解析；仅靠字符串"2024-08-21"在部分库中可能被当作文本处理，失去时序排序能力 - 百分比数据（如
0.75）若未配置percentage: true（ECharts）或手动乘以 100，可能显示为极小刻度，误导用户
字符串承担分类与标识职责，不可直接参与计算
横轴标签（labels）、图例文字（dataset.label）、分组字段（series.name）本质上是离散的、无序的标识符。它们不参与坐标计算，但影响布局逻辑和交互响应。
- Chart.js 要求
data.labels必须是字符串数组，即使内容是数字（如["2020", "2021"]），因为底层按索引匹配数据点；若传入数字数组[2020, 2021]，虽能渲染，但时间轴功能失效 - D3.js 中用字符串做数据绑定键（
.data(data, d => d.category)）时，相同字符串值会被视为同一组元素，用于 enter/update/exit 更新逻辑；若误用浮点数字符串（"1.0"vs"1"）会导致重复渲染或丢失更新 - 中文、特殊符号、长文本字符串需注意 SVG 文本截断或 Canvas 渲染宽度溢出，应配合
max-width、text-overflow或库内truncate配置
混合场景：字符串需解析后才可作数值使用
现实数据常含“伪装成字符串的数值”，比如 API 返回的 "123.45"、带单位的 "25°C"、逗号分隔的 "1,234,567"。这类字段不能直接喂给图表库，必须预处理。
立即学习“Java免费学习笔记（深入）”；
- 用
parseFloat()提取数字部分："25°C" → 25；用正则清除非数字字符："1,234,567" → 1234567 - 对带单位的字符串（如
"5.2 GB"），先提取数值再按单位换算为统一量纲（字节），否则不同单位数据无法横向比较 - 从对象数组中提取嵌套数值时，避免链式访问报错：
item.stats?.cpu?.usage || 0比item.stats.cpu.usage更安全
校验与降级策略保障鲁棒性
前端无法控制数据源质量，必须内置容错机制，防止一条脏数据让整张图崩溃。
- 绘图前遍历数据，用
typeof x === 'number' && !isNaN(x)过滤无效数值；对字符串字段检查typeof s === 'string' && s.trim() !== '' - Chart.js/ECharts 支持
plugins.tooltip.callbacks.label自定义提示文字，可在其中做运行时格式化，避免原始字符串直接暴露给用户 - 当检测到全空或全 NaN 数据时，主动渲染占位提示（如 “暂无数据” 文本），而非留白或报错
