Day4 chart基本属性分析
- 2019 年 10 月 4 日
- 筆記
属性设置是基于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支持如下几种设置方式：
-
padding: [ 20, 30, 20, 30] -
padding: 20 -
padding: { top: 20, right: 30, bottom: 20, left: 30 } -
padding: 'auto' -
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渲染。
