G2 教程

// 对所有图例进行配置
chart.legend({
  selectedMode: 'single' // 配置单选
});

// 对某个图例进行配置
chart.legend('x', {
  selectedMode: 'false' // 禁用图例筛选
});

  var data = [{"部门":"部门0","小组":"组名0","完成人数":37,"未完成人数":9},{"部门":"部门0","小组":"组名2","完成人数":29,"未完成人数":10},{"部门":"部门0","小组":"组名8","完成人数":59,"未完成人数":14},{"部门":"部门0","小组":"组名9","完成人数":60,"未完成人数":8},{"部门":"部门0","小组":"组名10","完成人数":83,"未完成人数":14},{"部门":"部门0","小组":"组名12","完成人数":67,"未完成人数":21},{"部门":"部门0","小组":"组名14","完成人数":46,"未完成人数":18},{"部门":"部门0","小组":"组名17","完成人数":19,"未完成人数":27},{"部门":"部门0","小组":"组名19","完成人数":74,"未完成人数":17},{"部门":"部门1","小组":"组名15","完成人数":34,"未完成人数":19},{"部门":"部门1","小组":"组名20","完成人数":71,"未完成人数":25},{"部门":"部门1","小组":"组名26","完成人数":28,"未完成人数":23},{"部门":"部门1","小组":"组名29","完成人数":90,"未完成人数":24},{"部门":"部门2","小组":"组名7","完成人数":50,"未完成人数":5},{"部门":"部门2","小组":"组名11","完成人数":86,"未完成人数":26},{"部门":"部门2","小组":"组名13","完成人数":63,"未完成人数":16},{"部门":"部门2","小组":"组名27","完成人数":76,"未完成人数":2},{"部门":"部门2","小组":"组名28","完成人数":13,"未完成人数":28},{"部门":"部门3","小组":"组名1","完成人数":33,"未完成人数":16},{"部门":"部门3","小组":"组名3","完成人数":14,"未完成人数":1},{"部门":"部门3","小组":"组名4","完成人数":43,"未完成人数":25},{"部门":"部门3","小组":"组名16","完成人数":45,"未完成人数":13},{"部门":"部门3","小组":"组名18","完成人数":50,"未完成人数":21},{"部门":"部门3","小组":"组名22","完成人数":43,"未完成人数":7},{"部门":"部门3","小组":"组名23","完成人数":38,"未完成人数":6},{"部门":"部门3","小组":"组名24","完成人数":33,"未完成人数":24},{"部门":"部门3","小组":"组名25","完成人数":13,"未完成人数":27},{"部门":"部门4","小组":"组名5","完成人数":98,"未完成人数":4},{"部门":"部门4","小组":"组名6","完成人数":88,"未完成人数":12},{"部门":"部门4","小组":"组名21","完成人数":52,"未完成人数":9}];
  // 按照部门排序
  data.sort(function(obj1, obj2) {
    return obj1['部门'] > obj2['部门'] ? 1 : -1;
  });
  data.forEach(function(obj) {
    obj['完成人数'] *= -1; // 将完成人数转换成负数
  });
  var Frame = G2.Frame;
  var frame = new Frame(data);
  // 将'完成人数','未完成人数' 合并成一列，增加完成状态字段
  frame = Frame.combinColumns(frame, ['完成人数', '未完成人数'], '人数', '完成状态');
  var chart = new G2.Chart({
    id: 'c1',
    width: 800,
    height: 400,
    plotCfg: {
      margin: [5, 100, 80]
    }
  });
  chart.source(frame);
  chart.filter('部门', ['部门0']);
  chart.coord().transpose();
  // 关键代码：设置对应图例的选择模式
  chart.legend('部门', {
    selectedMode: 'single'
  });
  // 关键代码：关闭对应图例的选择功能
  chart.legend('完成状态', {
    selectedMode: false,
    position: 'bottom'
  })
  chart.axis('小组', {
    title: null
  });
  chart.axis('人数', {
    formatter: function(value) {
      value = parseInt(value);
      return Math.abs(value); // 将负数格式化成正数
    },
    title: null
  });
  chart.interval().position('小组*人数').color('部门').shape('完成状态', ['rect', 'hollowRect']).style({
    lineWidth: 2
  });
  chart.render();

var sites = ["湘湖", "滨康路", "西兴", "滨和路", "江陵路", "近江", "婺江路", "城站", "定安路", "龙翔桥", "凤起路", "武林广场", "西湖文化广场", "打铁关", "火车东站", "闸弄口", "彭埠", "七堡", "九和路", "九堡", "客运中心", "下沙西", "金沙湖", "高沙路", "文泽路"];
var data = [];
for(var i = 0; i < sites.length; i ++){
  for(var j = sites.length - 1; j >=i; j--){
    var price = 0;
    var step = Math.abs(j - i);
    if (step <= 2) {
      price = 2;
    } else if (step <= 4) {
      price = 3;
    } else if (step <= 7) {
      price = 4;
    } else if (step <= 13) {
      price = 5;
    } else if (step <= 16) {
      price = 6;
    } else if (step <= 21) {
      price = 7;
    } else {
      price = 8;
    }
    var obj = {from: sites[i],to: sites[j],price: price};
    data.push(obj);
  }
}
var chart = new G2.Chart({
  id: 'c2',
  width: 800,
  height: 400,
  plotCfg: {
    margin: [20, 80, 20, 85]
  }
});
var defs = {
  'from': {
    values: sites
  },
  'to': {
    values: sites.slice(0).reverse()
  }
};
chart.axis('to',{
  title: null,
  grid: null,
  tickLine: null
});
chart.axis('from',false);
chart.source(data,defs);
chart.polygon().position('from*to').color('price')
  .label('price', {
    offset: 0,
    label: {
      fontWeight: 'bold'
    }
  })
  .style({
    lineWidth: 1,
    stroke: '#fff'
  });
// 在上面添加文本
chart.guide().text([0, sites.length], sites[0], {
  textAlign: 'center',
  fill: '#404040'
});
for (var i = 0; i < sites.length - 2; i ++) {
  var site = sites[i];
  var nextSite = sites[i + 1];
  chart.guide().text([nextSite,site], nextSite, {
    textAlign: 'left',
    fill: '#404040'
  });
}
chart.guide().text([sites.length - 1, 1], sites[sites.length-1], {
  textAlign: 'center',
  fill: '#404040'
});
chart.render();

var data = [
  {'time': '10:10', 'call': 4, 'waiting': 2, 'people': 2},
  {'time': '10:15', 'call': 2, 'waiting': 6, 'people': 3},
  {'time': '10:20', 'call': 13, 'waiting': 2, 'people': 5},
  {'time': '10:25', 'call': 9, 'waiting': 9, 'people': 1},
  {'time': '10:30', 'call': 5, 'waiting': 2, 'people': 3},
  {'time': '10:35', 'call': 8, 'waiting': 2, 'people': 1},
  {'time': '10:40', 'call': 13, 'waiting': 1, 'people': 2}
];

var chart = new G2.Chart({
  id: 'c3',
  width: 800,
  height: 400
});
chart.source(data);
// 去除 X 轴标题
chart.axis('time', {
  title: null
});
chart.axis('waiting', false);
// 将图例筛选模式设置为单选，默认为 `multiple`
chart.legend({
  selectedMode: 'single'
});
chart.line().position('time*people').color('#4E7CCC').size(2); 
chart.line().position('time*waiting').color('#94E08A').size(2);
chart.line().position('time*call').color('#F8AB60').size(2); 
chart.render();