区间面积图

简介

区间面积图 (Range Area Chart) 是一种用于展示不同数据集间的区间差异的视觉编码图形。在区间面积图中，您可以清楚地看到每个数据集之间的最小值字段和最大值字段的变化，以及它们之间的差距。这种图表常常用于展示数据的波动范围、不确定性、以及趋势。在 VChart 中，您可以轻松地配置和生成这样的图表。

图表构成

与面积图类似，区间面积图由面积图元、坐标轴及其他组件构成。

矩形图元为区间面积图的基本要素，相关的绘制配置必不可少:

rangeAreaChart.type: 图表类型，柱状体 / 条形图的类型为'rangeArea'
rangeAreaChart.data: 图表绘制的数据源
rangeAreaChart.xField: 分类字段，映射图元的 x 坐标
rangeAreaChart.yField: 数值字段数组，映射图元的下边界和上边界，即表现数据的最小值和最大值

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

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

快速上手

关键配置

yField 属性配置为最小值数值属性与最大值数值属性共同构成的数组

区间面积图特性

数据

一个离散 字段，如: x
两个数值字段，如: min max

数据定义如下：

data: [
  {
    name: 'rangeColumn',
    values: [
      {
        x: 'A',
        min: 5,
        max: 8
      },
      {
        x: 'B',
        min: 5,
        max: 8
      },
      {
        x: 'C',
        min: 5,
        max: 8
      }
    ]
  }
];

区间面积折线组合图

由于区间面积图只能展示每个维度下数据的最大最小值，为了展示数据整体走势，通常会将区间面积图和折线图进行组合。