散点图

简介

散点图是一种用于表示两个变量之间关系的图形。它通过在平面直角坐标系中绘制一系列点来表示两个变量之间的关系，这些点的坐标分别代表每个变量的值。散点图可以帮助我们直观地观察两个变量之间的关系，例如是否存在线性关系、是否存在某种趋势、是否存在异常点等。

正如上文所说，散点图用点的位置表示两个变量之间的关系，点的大小或颜色可以用来区分类别。而在 VChart 中，可以通过 scatterChart.sizeField指定散点的大小，从而以此表示变量的数值大小差异，这种指定散点大小的可视化表达方式也叫气泡图。

图表构成

散点图由点图元、坐标轴、提示信息及其他组件构成。

scatterChart.type: 图表类型，散点图的类型为'scatter'
scatterChart.data: 图表绘制的数据源
scatterChart.xField: 分类/数值字段，映射图元的 x 坐标
scatterChart.yField: 分类/数值字段，映射图元的 y 坐标
scatterChart.sizeField: 数值字段，映射图元的大小

坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

scatterChart.axes: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见VChart 坐标轴组件配置
scatterChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart scatterChart 配置

快速上手

关键配置

categoryField 属性声明为分类字段
valueField 属性声明为数值字段

散点图特性

数据

一个离散/ 数值 字段，如: product，映射图元 x 坐标
一个离散/ 数值字段，如: sales ，映射图元 y 坐标

可选：

一个数值字段，如:count，映射图元大小
一个离散 字段，如: type，映射图元形状

一组产品类别和销售额的数据定义如下：

data: [
  {
    name: 'scatter',
    values: [
      {
        product: 'Data Cable',
        sales: 200,
        count: 20,
        type: 'Digital'
      },
      {
        product: 'Tissue',
        sales: 500,
        count: 100,
        type: 'daily necessities'
      },
      {
        product: 'Bread',
        sales: 400,
        count: 100,
        type: 'Food'
      }
    ]
  }
];

图元及样式

由于散点图对数据的展现较为灵活，一个点图元即代表一条数据，所以人们通常会在其他视觉通道赋予其更多的数据意义。比如形状、大小等等。

形状

通过scatterChart.shapeField和scatterChart.shape可以分别指定散点图的形状映射字段和映射的范围。

scatterChart.shape的声明方式如下：

  size: {
    type: 'ordinal', // 映射类型，也可以选'linear'
    range: [10, 30, 50] // 映射范围
  }

或者也可以直接通过 callback 的形式指定映射关系，在scatterChart.shape做如下声明：

shape: () => 'start',

大小

通过scatterChart.sizeField和scatterChart.size可以分别指定散点图的形状映射字段和映射的范围。 scatterChart.size的声明方式如下：

  size: {
    type: 'linear', // 映射类型
    range: [10, 30] // 映射范围
  }

或者也可以直接通过 callback 的形式指定映射关系，在scatterChart.size做如下声明：

size: (data) => Math.sqrt(data['size']/10, 2),