view.md

View

视图，由 Chart 生成和管理，拥有自己独立的数据源、坐标系和图层，用于异构数据的可视化以及图表组合，一个 Chart 由一个或者多个视图 View 组成。因此 view 上的 api 同 chart 基本相同。

使用说明

Parent Components

• <Chart />

Child Components

• <Coord/> 坐标系组件
• <Axis/> 坐标轴组件,特性跟<Chart/>一样，默认全部不显示，若配置一个轴显示，则全部轴显示。
• <Geom/> 几何标记组件
• <Legend/> 图例组件
• <Tooltip/> 提示框组件
• <Guide/> 辅助标记组件
• <Facet/> 分面组件
• <View/> 视图组件

实际开发过程中，很多图表都可以采用View组件来实现，包含但不限于以下几个方面：

• 在同一个容器中出现两个或者更多不同坐标系的图表时，可以采用View组件来实现，如下图所示；Demo

• 同一个容器中的两个图表需要采用不同的数据源时，如下图所示：Demo

// 这里只显示部分核心代码
<Chart width={600} height={400} data={data}>
<Coord type="theta" radius={0.5} />
<Geom
  type="pie"
  position={Stat.summary.percent('value')}
  color={['type', ['#4E7CCC', '#36B3C3', '#F9815C']]}
/>
<View data={data}>
  <Coord type="theta" inner={0.75} />
  <Geom
    type="pie"
    position={Stat.summary.percent('value')}
    color="name"
  />
</View>
</Chart>

属性

1、id * String *

视图的 id 标识，用于唯一标定视图，如果用户不指定，G2 会默认提供一套 id 生成机制（‘view’ + views.length，如 view0, view1, …, viewN)。

2、start * Object *

绘制区域的起始坐标，x和y的取值范围均为0 -1。 我们的起始点是从左上角开始的。 参见:

<View start={{x:0.5, y:0.5}} />

3、end * Object *

绘制区域的结束坐标，x和y的取值范围均为0 -1。

参见:

<View end={{x:0.5, y:0.5}} />

4、data * Array | DataSet *

使用同 Chart 的 data 属性。

5、animate * Boolean *

视图是否执行动画。 默认值:true。

6、scale * Object *

使用同 Chart 的 scale 属性。

7、filter * Object *

使用同 Chart 的 filer 属性。