Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
173 lines (130 sloc) 7.32 KB

Coord

坐标系组件。 坐标系是将两种位置标度结合在一起组成的 2 维定位系统,描述了数据是如何映射到图形所在的平面。BizCharts 将坐标系抽象为组件,并且包含两种类型坐标系极坐标系(polar、theta、helix 均属于极坐标)和笛卡尔坐标系,目前所有的坐标系均是 2 维的。

Parent Component

Child Component

组件下不能嵌套其他图表组件。

使用说明

  • Coord组件用来描述图表中各元素绘制时所处的坐标系,一般一个图表中只存在一个坐标系;但是<View />中可以有独立坐标系存在;若没有特别说明,则默认当前图表的坐标系为直角坐标系(rect)

  • 默认采用笛卡尔坐标系,若要改变坐标系可以通过type属性改变。

例如下图展示的层叠柱状图,在不同坐标系下就变换成了其他的图表类型:

image

上图左侧为层叠柱状图,中间的饼图则是层叠柱状图在极坐标下对 x y 两个坐标轴进行转置后的结果,其中 x 轴被映射为半径,y 轴被映射成了角度。而最右边的牛眼图则相反,y 轴映射为半径。

  • 极坐标默认的起始角度和结束角度如下图所示:

API

1、type * String *

坐标系类型;不同类型的坐标系所支持的配置属性也不一样。具体见各类型属性说明。

BizCharts 中支持的坐标系有:

类型 说明
rect 默认类型,直角坐标系,由 x, y 两个垂直的维度构成。
polar 极坐标系,由角度和半径 2 个维度构成。
theta 一种半径固定的极坐标系,常用于饼图。
helix 螺旋坐标系,基于阿基米德螺旋线。

2、rotate * Number *

坐标系旋转,angle 表示旋转的度数,单位为角度。

3、scale * Array *

放大、缩小,默认按照坐标系中心放大、缩小。 参数为长度2的数组,第一个值代表 x 方向缩放比例,第二个值代表 y 方向缩放比例。

<Coord scale={[0.7, 1.2]} />

image

// todo: !!!!

4、reflect * 'x' | 'y' | Array*

镜像, 沿 x 方向镜像或者沿 y 轴方向映射。默认值为:'y'. 如果参赛是个数组,将依次调用.例如['x', 'y'] 则先执行x方向翻转reflect('x') 再执行y方向翻转reflect('y'),以此类推。 image

直角坐标系(rect)

无额外配置参数。

极坐标系(polar/theta/clock/gauge)

5.png

polartheta类型的极坐标系,其可配置的参数如下:

属性名 说明 类型 可选值 默认值
radius 设置半径,值为 0 至 1 的小数 Number
innerRadius 内部极坐标系的半径,[0 - 1]的小数 Number
startAngle 起始角度(弧度) Number
endAngle 结束角度(弧度) Number
//polar 示例
<coord type="polar" radius={0.5} startAngle={-Math.PI / 6} endAngle={7 * Math.PI /6}/>

效果如图:

//theta 示例
<coord type="theta" innerRadius={0.5}/>

效果如图:

gauge

属性名 说明 类型 可选值 默认值
startAngle 起始角度(弧度) Number
endAngle 结束角度(弧度) Number

clock

无额外配置属性。

// 这里只显示部分核心代码
<Chart width={600} height={400} data={val} scale={cols} padding={100}>
	<Coord type='gauge' startAngle={-9/8 * Math.PI} endAngle={1/8 * Math.PI} />
	<Axis name="value" />
	<Geom type="point" position="value" />
</Chart>

地理坐标系(map)

地理坐标系,支持不同类型的地理投影。

对于 map 类型的坐标系,情况比较特殊,对于不同的投影支持的可配置属性不同。如下所示:

适用于中国地图的 albers 投影

属性名 说明 类型 可选值 默认值
projection 指定投影方法 String albers
basic 指定投影方法的基本参数,[λ0, φ0, φ1, φ2] 分别表示中央经度、坐标起始纬度、第一标准纬度、第二标准纬度度 Array [110, 0, 25, 47]
max 指定投影后最大的坐标点 Array [16.573, -13.613]
min 指定投影后最小的坐标点 Array [-27.187, -49.739]

适用于世界地图的 albers 投影

属性名 说明 类型 可选值 默认值
projection 指定投影方法 String albers
basic 指定投影方法的基本参数,[λ0, φ0, φ1, φ2] 分别表示中央经度、坐标起始纬度、第一标准纬度、第二标准纬度度 Array [0, 0, 0, 60]
max 指定投影后最大的坐标点 Array [161.89, 120.635]
min 指定投影后最小的坐标点 Array [-144.485, -27.666]

适用与中国地图的 mercator 投影

属性名 说明 类型 可选值 默认值
projection 指定投影方法 String mercator
max 指定投影后最大的坐标点 Array [161.89, 120.635]
min 指定投影后最小的坐标点 Array [-144.485, -27.666]

适用于世界地图的 mercator 投影

属性名 说明 类型 可选值 默认值
projection 指定投影方法 String mercator
max 指定投影后最大的坐标点 Array [134.77, 63.68]
min 指定投影后最小的坐标点 Array [73.60, 18.48]

螺旋坐标系(helix)

螺旋坐标系,常用于周期性数据。

对于螺旋坐标系,其可配置的参数如下:

属性名 说明 类型 可选值 默认值
radius 设置半径,值为 0 至 1 的小数 Number
startAngle 螺旋线起点弧度 Number
endAngle 螺线线终点弧度 Number
//示例
<Coord type="helix" startAngle={0.5 * Math.PI} endAngle={12.5 * Math.PI} radius={0.8}/>

效果如图: