申多事儿 2022-01-05 20:35 采纳率: 100%
浏览 80
已结题

怎么让多个图形同步操作?

图形用的antv plot 里面的折线图 没有查到相关案例 要实现的效果如下：

img

  • 写回答

2条回答 默认 最新

  • ZionHH 2022-01-06 17:32
    关注

    img

    <!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4/g2.min.js"></script>
<script>
  const data = [{ genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 },];
  const chart1 = new G2.Chart({container: 'c1', height : 300 });
  const chart2 = new G2.Chart({container: 'c2', height : 300 });
  for(const chart of [chart1,chart2]){
    chart.source(data);
    chart.interval().position('genre*sold').color('genre')
    chart.render();
  }

  // 线表联动
  const connect = (...charts) => {
    for(const chartSrc of charts){
      for(const chartDest of charts){
        if(chartSrc === chartDest){
          continue;
        }
        chartSrc.on('plotmove', e => {chartDest.showTooltip(e);})
        chartSrc.on('plotleave', () => {chartDest.hideTooltip();})
      }
    }
  }
  
  connect(chart1,chart2);
</script>
</body>
</html>
    本回答被专家选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 1月16日
  • 专家已采纳回答 1月8日
  • 修改了问题 1月5日
  • 创建了问题 1月5日

悬赏问题

  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常，程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错？
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入
  • ¥15 mmo能不能做客户端怪物