VISALL 散点图 (Scatter Chart) 使用文档

简介

散点图组件是VISALL数据可视化库中的重要图表类型之一，用于展示两个变量之间的关系，可选择性地支持通过点的大小和颜色展示额外的维度。散点图适合探索变量间的相关性、分布模式和异常值检测。

基本用法

import { render } from 'path/to/bundle.esm.min.js';

// 创建散点图
const chart = render(container, {
  layers: [
    {
      type: 'scatter',
      dataIndex: 0,
      encoding: {
        x: 'GDP', // X轴字段名（数值型）
        y: '幸福指数' // Y轴字段名（数值型）
      }
    }
  ],
  data: [
    {
      values: [
        { 国家: '中国', GDP: 14.7, 幸福指数: 5.1 },
        { 国家: '美国', GDP: 20.9, 幸福指数: 6.9 },
        { 国家: '日本', GDP: 5.4, 幸福指数: 5.9 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	X轴映射字段，必须是数值类型字段
encoding.y	string	-	Y轴映射字段，必须是数值类型字段
encoding.size	string	-	可选，映射到点大小的字段，必须是数值类型
encoding.color	string	-	可选，映射到点颜色的字段，通常为分类字段
dataIndex	number	0	指定使用的数据集索引

数据要求

X轴字段要求为数值类型
Y轴字段要求为数值类型
Size字段（如提供）要求为数值类型
Color字段（如提供）通常为分类型字段
数据量至少需要大于1条
提供准确的字段名映射

高级用法

1. 添加大小维度

当需要展示第三个数值维度时，可以使用size编码：

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数',
    size: '人口'
  }
}

2. 添加颜色分类

使用color字段对数据进行分类展示：

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数',
    color: '大洲'
  }
}

3. 多维度分析

结合size和color进行多维度分析：

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数',
    size: '人口',
    color: '大洲'
  }
}

潜规则与注意事项

点大小映射机制：
- 散点图会根据size字段的数值范围自动映射到合适的点大小范围。
- 映射使用非线性比例（平方关系），以更好地突出数值差异。
- 大小范围会根据容器布局自动调整，保证视觉最佳效果。
布局适配：
- 散点图会根据不同的布局模式(layout)自动调整点大小范围：
  - 小布局(SMALL): [8, 28]
  - 宽布局(SMALL_2_1): [8, 46]
  - 高布局(SMALL_1_2): [8, 46]
  - 大布局(LARGE): [16, 92]
  - 特大布局(LARGE_3_2): [20, 120]
颜色映射：
- 散点图会自动为color字段的不同值分配不同的颜色。
- 颜色使用预设的调色板，如未指定则使用默认的20种颜色循环。
数据类型要求：
- x和y字段必须为数值类型，非数值类型将导致图表无法正确渲染。
- size字段必须为数值类型，用于确定点的大小。
- color字段通常为分类字段，用于区分不同的数据组。
单位显示规则：
- 如果数据中包含单位信息，会自动在坐标轴名称和提示框中显示单位。
- 单位信息通过dataMetaInfo[字段名].unit获取。

实现原理

散点图组件内部使用了以下数据处理逻辑：

数据编码：将原始数据中的x、y字段映射到坐标位置，size字段映射到点大小，color字段映射到颜色。
非线性大小映射：使用平方关系映射size字段的值到视觉大小。
动态大小范围：根据布局类型自动选择合适的点大小范围。
色彩分配：为color字段的每个唯一值分配一个固定的颜色。

点大小计算示例：

// 范围映射函数
function customMap(value, inputMin, inputMax, outputMin, outputMax) {
  return outputMin + ((value - inputMin) / (inputMax - inputMin)) ** 2 * (outputMax - outputMin);
}

类型兼容性问题

使用本组件时，需要注意以下类型兼容性问题：

确保x、y和size字段的数据能够被转换为数值类型
注意在使用size映射时处理异常小或异常大的数值
处理好可能的空值或无效值情况

示例

基础散点图

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数'
  }
}

带有大小维度的散点图

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数',
    size: '人口'
  }
}

带有分类的散点图

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数',
    color: '大洲'
  }
}

多维度散点图

{
  type: 'scatter',
  encoding: {
    x: 'GDP',
    y: '幸福指数',
    size: '人口',
    color: '大洲'
  }
}

常见问题解决

散点图点大小不均匀
- 检查size字段的数值分布，可能存在极端值导致映射不均匀
- 考虑对size数据进行预处理，如对数转换或归一化
颜色分类不清晰
- 减少颜色分类的数量，避免过多的类别导致视觉混乱
- 考虑使用自定义的颜色方案，增强对比度
坐标轴范围问题
- 注意x和y轴的数值范围，避免数据点集中在图表的一小部分
- 考虑调整坐标轴的范围或进行数据转换
性能问题
- 当数据量过大时，渲染大量散点可能导致性能问题
- 考虑减少数据点数量或使用数据抽样技术

简介​

基本用法​

配置参数​

数据要求​

高级用法​

1. 添加大小维度​

2. 添加颜色分类​

3. 多维度分析​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

基础散点图​

带有大小维度的散点图​

带有分类的散点图​

多维度散点图​

常见问题解决​

简介