Day4 chart基本属性分析

属性设置是基于chart实例的，所以我们必须先获取一个chart画板实例，获取方式： G2.Chart。创建 Chart 的方式如下：

new G2.Chart({
  container: {string} | {HTMLDivElement},
  width?: {number},
  height?: {number},
  padding?: {object} | {number} | {array},
  background?: {object},
  plotBackground?: {object},
  forceFit?: {boolean},
  animate?: {boolean},
  pixelRatio?: {number},
  data?: {array} | {DataSet.View},
  theme?: {string} | {object},
  renderer?: {string},
});

创建一个 chart 实例，返回一个 Chart 对象，建议在单个容器上只初始化一个 Chart 实例，接下来对chart的各个属性进行一一解析，其中红色字样为常用属性或重要注意点。

1.container

　　对应图表的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象,也就是说DOM容器不一定是div。

注意点：

　　1.其中容器标签不一定是div标签，但必须是能包含div的标签，至于哪些标签能够包含div标签，可以参考标签嵌套问题总结

　　2.容器标签中也不一定必须绑定id，绑定class等也可以，只要能获取到该元素就行，但相对来说绑定id最为合适，因为一般每幅图都是独一无二的，但如果需要多副相同的图时，需要写重复代码，所以这里可以提个需求：让容器允许接收元素数组，而不是单单某一个元素。

　　3.可以使用id代替container

源代码：

解析：if条件表示如果没有container属性且有id属性，则将id的属性值赋给container。

示例：

<div id="root"></div>

const chart = new G2.Chart({
  container: document.getElementById('root'), // 或直接填 'root'或者id:'root'
  width: 1000,
  height: 500
});

2.forceFit

　　图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取DOM容器（实例容器）的宽度。

注意：这里只取DOM容器的宽度，高度是取实例化chart时设置的height，如果未设置则默认height为500px。

源代码：

解析：如果forceFit为真值，则将图表的width重设为DOM容器的宽度，但是高度不重设。

3.width

　　指定图表的宽度，单位为 'px'，未设置时默认是500，当 forceFit: true 时宽度配置不生效。
4.height

　　指定图标的高度，单位为'px',未设置时默认是500，且不受forceFit影响。

5.padding

　　默认值为[ 20, 20, 95, 80 ]

设置图表的内边距，设置的是图表边界到坐标轴的距离，下图中即粉色边框到黑色坐标轴的距离。

padding支持如下几种设置方式：

1. padding: [ 20, 30, 20, 30]

1. padding: 20

1. padding: { top: 20, right: 30, bottom: 20, left: 30 }

1. padding: 'auto'

1. padding: [20, 'auto', 30, 'auto']

• 另外也支持设置百分比，如 padding: [ '20%', '30%' ]，该百分比相对于整个图表的宽高。

• padding 为数字以及数组类型时使用方法同 CSS 盒模型（上右下左）。

• padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。

6.background

设置图表整体的边框和背景样式，是一个对象，下图中的灰色背景部分就是background设置的区域(即整个chart画板区域)，包含如下属性：

background: {
  fill: {string}, // 图表背景色
  fillOpacity: {number}, // 图表背景透明度
  stroke: {string}, // 图表边框颜色
  strokeOpacity: {number}, // 图表边框透明度
  opacity: {number}, // 图表整体透明度
  lineWidth: {number}, // 图表边框粗度
  radius: {number} // 图表圆角大小
}

7.plotBackground

　　图表绘图区域的边框和背景样式，是一个对象，下图中的灰色背景部分就是plotBackground设置的区域(即图表绘制区域)，包含如下属性：

　　注意：从background和plotBackground两幅图中可以看出，当同时设置两个属性时，plotBackground属性设置会覆盖background属性。

plotBackground: {
  fill: {string}, // 图表背景色
  fillOpacity: {number}, // 图表背景透明度
  stroke: {string}, // 图表边框颜色
  strokeOpacity: {number}, // 图表边框透明度
  opacity: {number}, // 图表整体透明度
  lineWidth: {number}, // 图表边框粗度
  radius: {number} // 图表圆角大小
}

8.animate

图表动画开关，默认为 true，即开启动画。
9.pixelRatio

设置设备像素比，默认取浏览器的值 window.devicePixelRatio。

10.data

设置图表的数据源

data数据源格式只有两种：

• 包含 JSON 对象的数组

  var data=[{year:1995,value:10},{year:1996,value:15},{year:1997,value:25}]

• DataSet.View 对象，创建方式也有两种(DataSet会在之后的章节详细讲述，此处可以理解成就是一个图表）

方式1：
var dv=new DataSet.View();
方式2：
 var ds=new DataSet();
 var dv=ds.createView();

data数据源导入方式也有两种：

• 直接在chart实例化中的options的data属性中设置

  new G2.Chart({
    container: {string} | {HTMLDivElement},
    width: {number},
    height: {number},
    data: {array} | {DataSet.View},
  });

• 使用chart.source(data)方法设置。

const chart=new G2.Chart({
  container: {string} | {HTMLDivElement},
  width: {number},
  height: {number},
});
var data=[{year:1995,value:15},{year:1996,value:20},{year:1997,value:40}];
chart.source(data);

建议使用chart.source(data)方法设置数据源。

11.theme

设置当前图表的主题，可以是字符串 default 或者 dark（这两个是目前 G2 支持的主题），也可以是一个包含主题配置项的对象，具体设置形式参考 图表皮肤。这是“Chart 级别的主题样式配置”，默认值为default。

12.renderer

设置当前图表的使用的渲染方案，可以是字符串 canvas 或者 svg（这两个是目前 G2 支持的渲染引擎），渲染引擎的选择会影响图表最终的渲染性能。具体两种渲染引擎的差异可以参考 选择Canvas 还是 SVG，默认为Canvas渲染。