基于 G2 的 React 版本封装，使用体验更符合 React 技术栈的习惯，他们都与 AntV 有着紧密的协同，他们很快也将同步开源和发布基于 G2 3.0 的版本。
BizCharts概览
组件
Chart
图表最顶级的组件，控制着图表的创建、绘制、销毁等。 详细文档见 Chart api
Coord
坐标系组件，设置 Chart 或者 View 的坐标系类型。 详细文档见 Coord api
Axis
坐标轴组件，控制图表中坐标轴的样式等。 详细文档见 Axis api
Geom
几何标记对象，决定创建图表的类型。 详细文档见 Geom api。
Label
几何标记对象上的文本。 详细文档见 Label api
Legend
图例。 详细文档见 Legend api
Guide
坐标轴组件，控制图表中坐标轴的样式等。 详细文档见 Guide api
Facet
控制 Chart 分面。 详细文档见 Facet api
View
视图组件。 详细文档见 View api
Chart
图表的组件，内部生成了一个 G2 chart 实例，同时控制着其他子组件的加载和更新
图表布局
有时候坐标轴、图例等绘图区域外的组件显示不全时，可以通过调整图表各个方向的 padding 来调整最终效果
Api
renderer
- 类型：String
- 描述：指定图表的渲染方式，自BizCharts 3.2.1-beta.2版本开始，支持 chart 级别使用 svg 渲染。
- 默认值: canvas,可选值 svg.
使用方式1: 指定当前所有图表都用 svg 渲染。
const { G2 } from 'bizcharts';
G2.Global.renderer = 'svg' // or 'canvas';
使用方式2: 指定这一个图表使用 svg 渲染。
<Chart renderer='svg' width={600} height={400} data={data} scale={scale} forceFit/>
forceFit
- 类型：Boolean
- 描述：图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。
- bizcharts 图表只提供自适应父容器宽度的功能，不能自适应高度
width
- 类型：Number
- 描述：指定图表的宽度，默认单位为 'px'，当 forceFit: true 时宽度配置不生效。
height
- 类型：Number(必填)
- 描述：指定图表的高度，单位为 'px'。
宽和高未指定时，默认为 500px
data
- 类型：Array/DataSet
- 描述：设置图表的数据源，
data是一个包含 JSON 对象的数组或者 DataSet.View 对象。 具体参见 数据
scale
- 类型：Object
- 描述：配置数据比例尺，该配置会影响数据在图表中的展示方式。
const scale = {
'sales': {
type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', // 指定数据类型
alias: string, // 数据字段的别名，会影响到轴的标题内容
formatter: () => {}, // 格式化文本内容，会影响到轴的label格式
range: array, // 输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据。
tickCount: number, // 设置坐标轴上刻度点的个数
ticks: array, // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示
sync: boolean // 当 chart 存在不同数据源的 view 时，用于统一相同数据属性的值域范围
}
};
<Chart data={data} scale={scale} />
!注意：除了以上属性外，不同的 type 还对应有各自的可配置属性，详见 Scale 度量 API;
placeholder
- 类型：string
- 描述：图表source为空时显示的内容，未设置该属性时为G2 默认样式。
<Chart placeholder />则为Bizcharts 定义的无数据提示。 默认值:<div style={{ position: 'relative', top: '48%', textAlign: 'center' }}>暂无数据</div>;会在图表区域的中间显示 "暂无数据" 。
padding
- 类型：Object | Number | Array
- 描述：图表内边距，有如下配置方式:
//有时候坐标轴、图例等绘图区域外的组件显示不全时，可以通过调整图表各个方向的 padding 来调整最终效果
<Chart padding="auto" />
<Chart padding={[ 20, 30, 20, 30]} />
<Chart padding={20} />
<Chart padding={{ top: 20, right: 30, bottom: 20, left: 30 }} />
<Chart padding={[20, 'auto', 30, 'auto']} />
<Chart padding={['20%', '30%']} />
- padding 为数字以及数组类型时使用方法同 CSS 盒模型。
- padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。
- 另外也支持设置百分比，如 padding: [ '20%', '30%' ]，该百分比相对于整个图表的宽高。
paddding="auto" vs 没有设置padding
-
paddding="auto"
-
没有设置padding
animate
- 类型：Boolean
- 描述：图表动画开关，默认为 true，即开启动画。
如果用户需要自定义图表的动画，需要配置 animate 接口使用。具体参见 自定义动画
background
- 类型：Object
- 描述：设置图表整体的边框和背景样式，是一个对象，包含如下属性：
//可配置样式有
{
fill: string, // 图表背景色
fillOpacity: number, // 图表背景透明度
stroke: string, // 图表边框颜色
strokeOpacity: number, // 图表边框透明度
opacity: number, // 图表整体透明度
lineWidth: number, // 图表边框粗度
radius: number // 图表圆角大小
}
plotBackground
- 类型：Object
- 描述：图表绘图区域的边框和背景样式，是一个对象，包含如下属性：
//可配置样式有
{
fill: string, // 图表背景色
fillOpacity: number, // 图表背景透明度
stroke: string, // 图表边框颜色
strokeOpacity: number, // 图表边框透明度
opacity: number, // 图表整体透明度
lineWidth: number, // 图表边框粗度
radius: number // 图表圆角大小
}
pixelRatio
- 类型：Number
- 描述：设置设备像素比，默认取浏览器的值 window.devicePixelRatio。
filter
- 类型：Array
- 描述：过滤数据，如果存在对应的图例，则过滤掉的字段置灰。 Array:[[fieldString1, callback1], [fieldString2, callback2]]
<Chart
filter={[
['x', val => val > 20] // 图表将会只渲染 x 字段数值大于 20 的数据
]}
/>
改属性可以设置默认哪些图表选中和不选中状态。
className
- 类型：String
- 描述：设置图表最外层div的类名。
<Chart className="chart1" />
style
- 类型：Object
- 描述：设置图表最外层div的样式。
const style={fontSize: '12'}
<Chart style={style} />
theme
- 类型：String | Object
- 描述：设置当前图表的主题，默认提供 "default" 和 "dark" 样式。也可以是一个包含主题配置项的对象，具体配置项参考图表皮肤内容。
这是“Chart 级别的主题样式配置”。
网友评论