Chart
上一篇
概览
下一篇
Mark
Loading...
Chart 用于提供创建 canvas、添加 Mark 标记、自适应图表大小等能力。
const chart = new Chart({container: 'container',width: 640,height: 480,});chart.interval().data([{ genre: 'Sports', sold: 275 },{ genre: 'Strategy', sold: 115 },{ genre: 'Action', sold: 120 },{ genre: 'Shooter', sold: 350 },{ genre: 'Other', sold: 150 },]).encode('x', 'genre').encode('y', 'sold').encode('color', 'genre');chart.render();
| API | 描述 | 类型 | 默认值 |
|---|---|---|---|
| container | 指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例 | string | HTMLElement | |
| width | 图表宽度 | number | 640 |
| height | 图表高度 | number | 480 |
| depth | 图表深度，在 3D 图表中使用 | number | 0 |
| renderer | 指定渲染引擎，默认使用 canvas。 | ||
| plugins | 指定渲染时使用的插件 ，具体见 plugin | any[] | |
| autoFit | 图表是否自适应容器宽高，默认为 false，用户需要手动设置 width 和 height。当 autoFit: true 时，会自动取图表容器的宽高，如果用户设置了 height，那么会以用户设置的 height 为准。 | boolean | false |
| padding | 图表内边距 | number | 30 |
创建 Chart 实例。
chart.interval添加 interval 图形，具体见 mark。
chart.rect添加 rect 图形，具体见 mark。
chart.point添加 point 图形，具体见 mark。
chart.area添加 area 图形，具体见 mark。
chart.line添加 line 图形，具体见 mark。
chart.vector添加 vector 图形，具体见 mark。
chart.link添加 link 图形，具体见 mark。
chart.polygon添加 polygon 图形，具体见 mark。
chart.image添加 image 图形，具体见 mark。
chart.text添加 text 图形，具体见 mark。
chart.lineX添加 lineX 图形，具体见 mark。
chart.lineY添加 lineY 图形，具体见 mark。
chart.range添加 range 图形，具体见 mark。
chart.rangeX添加 rangeX 图形，具体见 mark。
chart.rangeY添加 rangeY 图形，具体见 mark。
chart.connector添加 connector 图形。
chart.sankey添加 sankey 图形，具体见 graph。
chart.treemap添加 treemap 图形，具体见 graph。
chart.boxplot添加 boxplot 图形，具体见 mark。
chart.density添加 density 图形，具体见 mark。
chart.heatmap添加 heatmap 图形，具体见 mark。
chart.shape添加自定义图形，具体见 mark。
chart.pack添加 pack 图形，具体见 graph。
chart.forceGraph添加 forceGraph 图形，具体见 graph。
chart.tree添加 tree 图形，具体见 graph。
chart.wordCloud添加 wordCloud 图形，具体见 mark。
chart.gauge添加 gauge 图形，具体见 mark。
chart.view添加 view 图形，具体见 api。
chart.spaceLayer添加 spaceLayer 图形，具体见 composition。
chart.spaceFlex添加 spaceFlex 图形，具体见 composition。
chart.facetRect添加 facetRect 图形，具体见 composition。
chart.facetCircle添加 facetCircle 图形，具体见 composition。
chart.repeatMatrix添加 repeatMatrix 图形，具体见 composition。
chart.geoView添加 geoView 图形，具体见 geo。
chart.geoPath添加 geoPath 图形，具体见 geo。
chart.timingKeyframe添加 timingKeyframe 图形，具体见 composition。
chart.point3D添加 point3D 图形，具体见 3d。
chart.interval3D添加 interval3D 图形，具体见 3d。
chart.line3D添加 line3D 图形，具体见 3d。
chart.surface3D添加 surface3D 图形，具体见 3d。
chart.width设置或获取图表的宽度。
chart.height设置或获取图表的高度。
chart.title设置或获取图表的标题。
chart.options获取图表的配置项。
chart.data设置图形的数据，支持多种数据来源和数据变换，具体见 data。
chart.encode设置图形每个通道的字段名称，具体见 encode。
chart.scale设置图形每个通道的比例尺，具体见 scale。
chart.title设置图形的标题，具体见 title。
chart.legend设置图形的图例，具体见 legend。
chart.tooltip设置图形的提示，具体见 tooltip。
chart.axis设置图形的坐标轴，具体见 axis。
chart.slider设置图形的缩略轴，具体见 slider。
chart.scrollbar设置图形的滚动条，具体见 slider。
chart.label设置图形的标签，具体见 label。
chart.style设置图形的样式，具体见 style。
chart.theme设置图形的主题，具体见 theme。
chart.labelTransform设置图形的 labelTransform，具体见 label里的transform配置。
chart.render调用图表的渲染方法。
chart.destroy销毁图表容器和 Canvas 画布。
chart.clear清空图表配置和 Canvas 画布。
chart.show显示当前节点渲染的图形。
chart.hide隐藏当前节点渲染的图形。
chart.changeData更改图形的数据来源并重新渲染整个图表。
chart.changeSize改变图表的宽高，并重新渲染。
chart.forceFit自动根据外部 DOM 容器大小调整画布并重新渲染。
chart.getContainer获取图表的 HTML 容器。
chart.getContext返回 chart 的 context 信息。
chart.getView返回 chart 渲染时的 view 实例。
chart.getCoordinate返回 chart 渲染时的 coordinate 实例。
chart.getTheme返回 chart 渲染时的 theme 实例。
chart.getGroup返回 chart 渲染时的 canvas group 实例。
chart.getScale返回 chart 渲染时所有的 scale 实例。
chart.getScaleByChannel通过通道名称查找返回 chart 渲染时对应的 scale 实例。
chart.on监听 chart 上的事件。
chart.once监听 chart 上的事件，仅触发一次。
chart.emit触发 chart 上的事件。
chart.off卸载 chart 上的监听事件。
chart.getNodesByType通过 type 查找所有的 node 子节点。
chart.getNodeByKey通过 key 找到当前 node 的子节点。
chart.append创建一个新的 Node 并添加在 chart 的子节点上。
| 事件 | 描述 |
|---|---|
beforerender | 图表渲染前执行该事件 |
afterrender | 图表渲染后执行该事件 |
beforepaint | 图表布局计算后，绘制前执行该事件 |
afterpaint | 图表绘制后执行该事件 |
beforechangedata | 图表更新数据前执行该事件 |
afterchangedata | 图表更新数据后执行该事件 |
beforechangesize | 图表更新尺寸前执行该事件 |
afterchangesize | 图表更新尺寸后执行该事件 |
beforedestroy | 图表销毁前执行该事件 |
afterdestroy | 图表销毁后执行该事件 |
通过 chart.on() 来申明生命周期事件。例如：
chart.on('afterrender', (e) => {console.log('Chart has been rendered!');});
import { Renderer as GRenderer } from '@antv/g-svg';const chart = new Chart({container: 'container',width: 640,height: 480,renderer: GRenderer,});chart.interval().data([{ genre: 'Sports', sold: 275 },{ genre: 'Strategy', sold: 115 },{ genre: 'Action', sold: 120 },{ genre: 'Shooter', sold: 350 },{ genre: 'Other', sold: 150 },]).encode('x', 'genre').encode('y', 'sold').encode('color', 'genre');chart.render();