小程序使用AntV F2自定义图表和legend交互

注意：横坐标显示的名称为lx， data里的lx与findLegendItem方法中的lx保持一致。

var data = [{
     
    lx: 'Jon Nicoll',
    score: 282,
    avgScore: 94
  }, {
     
    lx: 'Aaron Maxwell',
    score: 208,
    avgScore: 41.6
  }, {
     
    lx: 'Warren Clunes',
    score: 186,
    avgScore: 46.5
  }, {
     
    lx: 'David Bolton',
    score: 184,
    avgScore: 30.67
  }, {
     
    lx: 'Joel Robindon',
    score: 177,
    avgScore: 44.25
  }, {
     
    lx: 'Kyle Buckley',
    score: 150,
    avgScore: 50
  }, {
     
    lx: 'Jordan Lawrence',
    score: 148,
    avgScore: 24.67
  }, {
     
    lx: 'Jack Carey',
    score: 138,
    avgScore: 34.5
  }, {
     
    lx: 'Kuldeep Pegu',
    score: 130,
    avgScore: 32.5
  }, {
     
    lx: 'Max Hillier',
    score: 128,
    avgScore: 32
  }, {
     
    lx: 'Angus Le Lievre',
    score: 127,
    avgScore: 62.5
  }];

  var legendItems = [{
     
    name: '个人分数',
    marker: 'square',
    fill: '#FACC14',
    checked: true
  }, {
     
    name: '平均分数',
    fill: '#000',
    checked: true
}];

  function findLegendItem(lx) {
     
    var index = void 0;
    for (var i = 0; i < legendItems.length; i++) {
     
      if (legendItems[i].name === lx) {
     
        index = i;
        break;
      }
    }
    return index;
  }

 chart = new F2.Chart({
     
    el: canvas,
    width,
    height,
    options:{
     
      legend:true
    }
  });

  chart.source(data, {
     
    score: {
     
      alias: '个人分数'
    },
    avgScore: {
     
      alias: '平均分数'
    }
  });
  chart.axis('avgScore', {
     
    grid: null
  });
  chart.axis('lx', {
     
    label: {
     
      rotate: Math.PI / 3,
      textAlign: 'start',
      textBaseline: 'middle'
    }
  });

  // 自定义图例内容以及交互行为
  chart.legend({
     
    custom: true,
    items: legendItems,
    onClick: function onClick(ev) {
     
      var item = ev.clickedItem;
      var name = item.get('name');
      var checked = item.get('checked');
      var children = item.get('children');
      if (checked) {
     
        var markerFill = children[0].attr('fill');
        var textFill = children[1].attr('fill');
        children[0].set('_originColor', markerFill); // 缓存 marker 原来的颜色
        children[1].set('_originColor', textFill); // 缓存文本原来的颜色
      }
      var geoms = chart.get('geoms');
      for (var i = 0; i < geoms.length; i++) {
     
        var geom = geoms[i];

        if (geom.getYScale().alias === name)
          if (!checked) {
     
            geom.show();
            children[0].attr('fill', children[0].get('_originColor'));
            children[1].attr('fill', children[1].get('_originColor'));
          } else {
     
            geom.hide();
            children[0].attr('fill', '#bfbfbf'); // marker 置灰
            children[1].attr('fill', '#bfbfbf'); // 文本置灰 置灰
          }
        item.set('checked', !checked);
        legendItems[findLegendItem(name)].checked = !checked;
      }
    }
  });

  chart.interval().position('lx*score').color('#FACC14');
  chart.line().position('lx*avgScore').color('#000');
  chart.point().position('lx*avgScore').size(3).style({
     
    fill: '#000',
    stroke: '#fff',
    lineWidth: 1
  });
  chart.render();