facet 分面

简介如何设置分面分面的类型rect 矩形分面list 水平列表分面circle 圆形分面tree 树形分面mirror 镜像分面简介分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中，所有子图采用相同的图表类型，并进行了一定的设计，使得它们之间方便进行比较。 总结起来，分面其实提供了两个功能：

按照指定的维度划分数据集；对图表进行排版。对于探索型数据分析来说，分面是一个强大有力的工具，能帮你迅速地分析出数据各个子集模式的异同。 image 如何设置分面chart.facet(dims, facetCfg) 分面配置有两个基本参数：一个是分面变量的设置，另一个是指定分面的类型。 说明：

第一个参数 dims 用于设定数据划分的维度，是数据的字段名，包含多个维度时使用数组传入；第二个参数 facetCfg，是一个对象，进行分面的配置，包括分面的类型，各个分面之间的间距等，默认采用矩形分面。

  1. chart.facet(['cut', 'carat'], {
  2.   type: 'list', // 列表类型的分面
  3.   margin: 20 // 各个分面的距离
  4. });

更多配置信息，请查阅 facet api 文档。 分面的类型G2 支持的分面类型如下表所示： 分面类型说明rect默认类型，指定 2 个维度作为行列，形成图表的矩阵。list指定一个维度，可以指定一行有几列，超出自动换行。circle指定一个维度，沿着圆分布。tree指定多个维度，每个维度作为树的一级，展开多层图表。mirror指定一个维度，形成镜像图表。

rect 矩形分面rect 矩形分面是 G2 的默认分面类型。支持按照一个或者两个维度的数据划分，按照先列后行的顺序。

  1. chart.facet(['cut', 'clarity'], {
  2.   margin: 10
  3. });

分面矩阵每列按照 cut 字段划分，每行按照 clarity 字段划分。

  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   var chart = new G2.Chart({
  3.     id: 'c1',
  4.     width: 800,
  5.     height: 400,
  6.     animate: false,
  7.     plotCfg: {
  8.       margin: [30, 80, 80, 80]
  9.     }
  10.   });
  11.   chart.source(data);
  12.   chart.facet(['cut','clarity'], {
  13.     margin: 10
  14.   });
  15.   chart.legend('bottom'); // 设置底部图例
  16.   chart.point().position('carat*price').color('cut');
  17.   chart.render();
  18. });

list 水平列表分面该类型分面可以通过设置 cols 属性来指定每行可显示分面的个数，超出时会自动换行。

  1. $.getJSON('../../../../../static/data/diamond.json',function (data) {
  2.   var chart = new G2.Chart({
  3.     id: 'c2',
  4.     width: 800,
  5.     height: 400,
  6.     animate: false,
  7.     plotCfg: {
  8.       margin: [30, 90, 80, 80]
  9.     }
  10.   });
  11.   chart.source(data);
  12.   chart.facet(['cut'], {
  13.     type: 'list',
  14.     cols: 3, // 超过3个换行
  15.     margin: 40
  16.   });
  17.   chart.point().position('carat*price').color('cut');
  18.   chart.render();
  19. });

circle 圆形分面

  1. $.getJSON(‘../../../../../static/data/diamond.json’,function (data) {
  2.   var Stat = G2.Stat;
  3.   var chart = new G2.Chart({
  4.     id: ‘c3’,
  5.     width: 800,
  6.     height: 400,
  7.     animate: false,
  8.     plotCfg: {
  9.       margin: [30, 90, 80, 80]
  10.     }
  11.   });
  12.   chart.source(data);
  13.   chart.facet([‘clarity’], {
  14.     type: ‘circle’
  15.   }); // 分面设置
  16.   chart.coord(‘polar’);
  17.   chart.axis(‘cut’,false); // 不显示坐标轴
  18.   chart.axis(‘price’,false);
  20.   chart.interval().position(Stat.summary.mean(‘cut*price’)).color(‘cut’);
  22.   chart.render();
  23. });

tree 树形分面提供了 line 和 smooth 两个属性，用于配置连接各个分面的线的样式，其中：

line，用于配置线的显示属性。smooth，各个树节点的连接线是否是平滑的曲线，默认为 false。 下图展示了树形多层级的分面。

  1. var data = [
  2.   {gender:'男',count:40,'class': '一班',grade: '一年级'},
  3.   {gender:'女',count:30,'class': '一班',grade: '一年级'},
  4.   {gender:'男',count:35,'class': '二班',grade: '一年级'},
  5.   {gender:'女',count:45,'class': '二班',grade: '一年级'},
  6.   {gender:'男',count:20,'class': '三班',grade: '一年级'},
  7.   {gender:'女',count:35,'class': '三班',grade: '一年级'},
  8.   {gender:'男',count:30,'class': '一班',grade: '二年级'},
  9.   {gender:'女',count:40,'class': '一班',grade: '二年级'},
  10.   {gender:'男',count:25,'class': '二班',grade: '二年级'},
  11.   {gender:'女',count:32,'class': '二班',grade: '二年级'},
  12.   {gender:'男',count:28,'class': '三班',grade: '二年级'},
  13.   {gender:'女',count:36,'class': '三班',grade: '二年级'}
  14. ];
  15. var Stat = G2.Stat;
  16. var chart = new G2.Chart({
  17.   id: 'c4',
  18.   width: 800,
  19.   height: 400,
  20.   animate: false,
  21.   plotCfg: {
  22.     margin: [0, 90, 80, 80]
  23.   }
  24. });
  25. chart.source(data);
  26. chart.coord('theta');
  27. chart.facet(['grade','class'], {
  28.   type: 'tree',
  29.   line: {
  30.     stroke: '#00a3d7'
  31.   },
  32.   smooth: true
  33. });
  34. chart.intervalStack().position(Stat.summary.percent('count')).color('gender');//
  35. chart.render();

mirror 镜像分面通过配置 transpose 属性为 true，可以将镜像分面翻转。

  1. $.getJSON('../../../../../static/data/diamond.json',function (data) {
  2.   var Stat = G2.Stat;
  3.   var Frame = G2.Frame;
  4.   var chart = new G2.Chart({
  5.     id: 'c5',
  6.     width: 800,
  7.     height: 400,
  8.     animate: false,
  9.     plotCfg: {
  10.       margin: [30, 90, 80, 80]
  11.     }
  12.   });
  13.   var frame = new Frame(data);
  14.   frame.addCol('caratGroup',function(obj){
  15.     if (obj.carat > 1){
  16.       return 1;
  17.     }else{
  18.       return 0;
  19.     }
  20.   });
  21.   var defs = {
  22.     'caratGroup': { // 由于镜像坐标系仅支持存在2个分类的字段，所以我们构建仅有2个分类的字段
  23.       type: 'cat',
  24.       values: ['小钻石 < 1克拉','大钻石 >= 1克拉'],
  25.       alias: '钻石大小'
  26.     }
  27.   };
  28.   chart.source(frame, defs);
  29.   chart.legend(false);
  30.   chart.facet(['caratGroup'],{ // 镜像分面
  31.     type: 'mirror',
  32.     margin: 100
  33.   });
  34.   chart.interval().position(Stat.summary.percent(Stat.summary.count(Stat.bin.rect('depth')))).color('caratGroup');
  35.   chart.render();
  36. });
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="