图表对象配置（chart）

一、图表容器二、图表样式三、其他配置图表宽度自适应图表动画本节主要讲解如何创建以及配置 Chart 图表对象，主要内容包括图表容器全局样式配置、绘图区、图表宽度自适应等相关内容。 一、图表容器

 id="c1">

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

1. 传入 dom 容器的 id

   var chart = new G2.Chart({
     id: 'c1',
     width: 1000,
     height: 500
   });

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

   var chart = new G2.Chart({
     container: document.getElementById('c1'),
     width: 1000,
     height: 500
   });

二、图表样式1. 图表的宽高创建 chart 对象时，需要指定图表的宽高，通过如下方式指定：

var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500
});

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

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

var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500,
  plotCfg: {
    margin: [0, 20, 80, 100] // 上，右，下，左
  }
});

下图展示了 G2 的图表布局： 三、其他配置图表宽度自适应默认情况下，G2 图表的宽度需要用户手动设置 width 参数，当需要图表跟随图表容器响应式时，则需要开启 forceFit 属性，默认其值为 false，开启方式如下：

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height : 400
});

此时，不需要设置 width 属性，即使设置了也不会生效。 另外还可以手动得调用自适应函数 chart.forceFit() 来响应页面变化。

chart.forceFit(); // 手动调用自适应函数

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

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

                    当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
                        上一篇:
                        下一篇:
            <div class="