区间图 interval

阅读时间约 2 分钟

简介

区间图(interval)是一种表示数据上下区间的图表的集合。区间图在直角坐标系下是柱状图,极坐标下是玫瑰图,是一种所以用长度、宽度、弧度、周长等来表现数据大小、区间的图表,区间图对应一般的图表类型有:

  • 柱状图(条形图),一般的柱状图,使用长度对比数据大小。
  • 玫瑰图,使用半径大小对比数据大小。
  • 饼图/环图,使用弧度大小对比数据大小。
  • 条形环图(玉缺图),同样使用圆弧对比数据大小。
  • 直方图,表示数据分布的直方图。

区间图可以进行数据调整,当 x 轴上同一个分类下有多个分组的数据时可以进行:

  • 层叠,构成层叠柱状图、层叠玫瑰图、嵌套饼图、层叠条形环图。

  • 分组,构成分组柱状图、分组玫瑰图。

  • 也可以对数据进行对称处理,构成漏斗图。

支持的数据格式

区间图生成的所有的图表的数据格式是一致的,这里的数据格式是指位置相关字段的数据格式,有三种情况:

  • x,y 都是数值,一般的柱状图、玫瑰图
const data = [{ name: '分类一', value: 100 }];
chart.interval().position('name*value');

  • x 是数值,y 是数组,区间柱状图、区间玫瑰图、层叠柱状图、层叠玫瑰图以及对称的柱状图(漏斗图)。
const data = [{ name: '分类一', value: [10, 100] }];
chart.interval().position('name*value');

  • x 是数组,y 是数值,构成了直方图
const data = [
  { score: [60, 70], count: 30 },
  { score: [71, 80], count: 90 },
];
chart.interval().position('score*count');

  • x 是数值,y 为空,仅当饼图时,此时的坐标系是 'theta',其实是在 G2 的内部补齐了 x,y

汇总的表格:

x y 解释
数值 数值 常规的柱状图、玫瑰图
数值 数组 区间柱状图、区间玫瑰图、层叠柱状图、层叠玫瑰图、漏斗图
数组 数值 直方图、环形直方图
数值 饼图

视觉通道

color、shape 视觉通道映射的字段是分类类型时会导致数据的分组,数据分组后,需要进行数据的调整:层叠、分组。

color

颜色视觉通道在区间图上应用时一般映射分类字段,对数据进行分组,但是有些特殊情况下也会映射的连续字段上,对不同区间的数值对应的图形使用不同的颜色:

const data = [
  { a: 'a1', value: 50 },
  { a: 'a2', value: 60 },
  { a: 'a3', value: 40 },
];

chart
  .interval()
  .position('a*value')
  .color('value', value => {
    if (value > 50) {
      return 'red';
    }
    return 'green';
  });

此时 color 内部的回调函数将连续字段 value 转换成了一个分类字段,大于 50 和小于 50 的分类。

size

size 视觉通道对于区间图来说一般仅设置常量,应用到区间图的宽度。一般不进行连续字段的映射,原因在于区间图是通过长度来对比数据大小的,如果再增加宽度信息,那么会带来视觉通道的干扰,看下面的情形:

区间图的不同的图表类型对 size 的解析不完全相同:

  • 柱状图,将 size 的数值解析成画布上的像素值。
  • 玫瑰图,将 size 的数据解析成角度值。
  • 饼图,size 字段无意义。
  • 环状条形图,size 的数值解析成画布上的像素值。

shape

区间图支持的图表形状有:

  • rect,默认的填充区间图。
  • hollow-rect, 非填充的仅有边框的区间图。
  • line, 使用线来表示上下区间。
  • tick,使用多条线来表示数据区间。

区间图跟坐标系

前面的章节中,我们介绍过坐标系,在不同的坐标系中图形标记有不同的表现方式,下面我们介绍 interval 受坐标系的影响:

  • interval(区间)在直角坐标系中表现为柱状图,在极坐标下表现为玫瑰图。
  • interval(区间)在直角坐标系 transpose(转置)后,表现为条形图,在极坐标系 transpose(转置)后表现为条形环图 。

  • 层叠 interval(区间)在直角坐标系 transpose(转置)后,表现为层叠条形图,在极坐标系 transpose(转置)后是层叠的条形环图。当展示百分百的层叠 Interval 时,在极坐标系 transpose(转置)后是嵌套饼图,仅有一个分类时,则是单个饼图。

  • 当 interval(区间)的 shape 是line,tick,在极坐标系下会做相应的弯曲 。