实例化 Chart 对象时，绑定 dom 容器的方式有两种：

1. 传入 dom 容器的 id

  2.   id: 'c1',
  3.   width: 1000,
  4.   height: 500
  5. });

2. 传入 dom 容器的 html 节点对象

  1. var chart = new G2.Chart({
  2.   width: 1000,
  3.   height: 500
  4. });

2. 图表的样式对图表样式进行配置时，需要设置 plotCfg 属性，该属性包含 border margin 属性：

  • border：用于设置整个 chart 的图表背景样式，包括边框，背景色，透明度，圆角等;
  • background：用于设置 chart 绘图区域的背景样式，包括边框，背景色，透明度，圆角等；
  • margin：用于设置边距，用法同 CSS 中的 margin 属性相同, [上，右，下，左]

下图展示了 G2 的图表布局：

  1. var chart = new G2.Chart({
  2.   id: 'c1',
  3.   forceFit: true,
  4.   height : 400

此时，不需要设置 属性，即使设置了也不会生效。

另外还可以手动得调用自适应函数 chart.forceFit() 来响应页面变化。

图表动画

默认情况下，G2 的图表动画处于开启状态，可以通过如下两种方式关闭图表动画：

  1. // 方式一： 设置 animate 属性
  2. var chart = new G2.Chart({
  3.   id: 'c1',
  4.   width: 800,
  5.   height : 400,
  6.   animate: false // 关闭图表动画
  7. });
  9. // 方式二： 手动调用 animate 函数
  10. chart.animate(false); // 关闭动画