区间图 interval

区间图 interval

简介

区间图（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';
  });