Animate 例子 Animate 在 G2 中，我们提供了四种动画场景类型： appear: 初始化时的入场动画； enter: 更新时的出现动画； update: 更新时的变化动画； leave: 更新时的动画；通过如下方式为图形定义这四种动画场景的配置： // 配置更新时的入场动画，其他动画类型相同 geom . animate (...

按需加载 按需加载组件 按需加载模块 按需加载 出于性能的考虑，我们会对模块和组件进行按需加载。 按需加载组件 通过 umi/dynamic 接口实现，比如： import dynamic from 'umi/dynamic' ; const delay = ( timeout ) => new Prom...

图表动画配置 动画类型 动画元素 动画配置 Chart View Geometry Geometry label 上的动画配置 图表组件 4.0 内置默认动画函数 图表动画配置 动画类型 G2 根据数据的装载更新，将动画分为以下四类： 动画类型 解释 appear 图表第一次加载时的入场动画 enter 图表绘制完成，发生...

什么是几何标记 如何声明几何标记 几何标记类型 几何标记和图表类型 geom 对象方法 几何标记和图形形状 什么是几何标记 即我们所说的点、线、面这些几何图形。G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。 G2 生成的图表的类型，都...

简介 创建 Frame 使用 Frame 处理数据 合并多列 Frame.combinColumns 调试时输出 更多 简介 在 data 数据 章节我们了解了 Frame 数据集对象，通过将 JSON 数组转换为 Frame 对象，可以方便快捷得进行数据的各种操作。 创建 Frame 通过 G2.Frame 来获取 Frame 对...

简介 空数据源图表绘制 动态更新数据 chart.changeData(data) 简介 很多场景下图表的数据源是需要异步加载获取的，在 G2 中实现异步数据的更新也是非常的简单，你只需要通过 jquery 等工具异步获取数据后，按照正常的创建图表步骤绘制即可。 $ . getJSON ( 'data.json' , function ( ...

虚拟 Group 虚拟 Group 在spritjs中，用Group给精灵元素分组，对分组的元素进行统一的transform操作是一个很棒的方法。Group还可以嵌套，以形成多层树状的结构，这样就使得我们可以有能力用精灵来构造复杂的UI组件。 对于普通的Group元素，它本身的contentSize为[0, 0]，并且不具有普通元素的盒模型 。这样...

自定义主题 定义全新的主题结构 主题属性 自定义主题样式表 主题样式表结构 自定义主题 G2 提供了自定义主题机制以允许用户切换、定义图表主题。包括： 定义全新的主题结构 基于已有主题结构，切换不同的主题样式表 定义全新的主题结构 import { registerTheme , Chart } from '@...

图表如何支持自适应宽度 如何格式化坐标轴文本 怎么控制坐标轴刻度线个数以及刻度线的间距 如何控制坐标轴的显示的数值范围 如何格式化图例的显示文本 如何设置图例项的初始状态 如何绘制多 y 轴图表 如何绘制混合图表 如何修改 tooltip 的显示内容 如何导出图片 图表如何支持自适应宽度 如何格式化坐标轴文本 怎么控制坐标轴刻度线...

坐标系介绍 如何设置坐标系 坐标系类型及配置 坐标系配置 坐标系变换 相关实例 坐标系介绍 坐标系是将两种位置标度结合在一起组成的 2 维定位系统，描述了数据是如何映射到图形所在的平面。 G2 包含了两种类型坐标系（polar、theta、helix 均属于极坐标），目前所有的坐标系均是 2 维的。 如何设置坐标系 G2 默认提供的...