Fork me on GitHub

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渲染

 
posted @ 2019-08-19 10:20 溪风! 阅读(...) 评论(...) 编辑 收藏