如何使用图表
上一篇
G2 图表组成
下一篇
概览
Loading...
G2 的大部分能力通过 Chart 对象暴露给用户，比如绘制一个简单的条形图：
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});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');chart.render();
接下来我们就来看看 Chart 的核心使用方式。
每个 G2 的可视化都是通过实例化 Chart 对象创建一个新的图表实例：
import { Chart } from '@antv/g2';const chart = new Chart({/* 图表选项 */});
可以通 new Chart(options) 指定一些全局选项：比如挂载的容器，宽度，高度等。所有的选项都是可选的。
// 按需指定选项const chart = new Chart({width: 800, // 图表高度height: 400, // 图表宽度container: 'chart', // 挂载容器的 ID});
图表实例只有挂载了之后才能被渲染到屏幕上，其中有两种挂载的方式。
<div id="chart"></div>
第一种，自动挂载。
const chart = new Chart({container: 'chart', // 指定挂载容器 id});// 或者const chart = new Chart({container: document.getElementById('chart'), // 指定挂载容器});
第二种，手动挂载。
const chart = new Chart();// 声明可视化// ...const container = chart.getContainer(); // 获得挂载的容器document.getElementById('chart').appendChild(container);
当然，在能看见图表之前，还需要调用 chart.render。
// 创建图表实例const chart = new Chart({container: 'chart',});// 声明可视化// ...// 渲染chart.render().then(() => {// 渲染成功}).catch((error) => {// 渲染失败});
当通过图表实例提供的 API 修改了声明的可视化之后，只用再次调用 chart.render 就可以更新图表了。
// 第一次渲染chart.render();// 更新声明// ...// 更新图表chart.render();
清空画布和取消事件监听，同时会清空图表配置，常常用于绘制新的图表。
chart.clear();
销毁画布和取消事件监听，常常用于销毁组件和页面的时候。
chart.destroy();