search

antvis / F2

📱📈An elegant, interactive and flexible charting library for mobile.
https://f2.antv.vision/zh
MIT License
7.9k stars 649 forks source link

条形图在加入Pan手势且canvas不在(0, 0)的情况，触摸点位置不正确 #673

Open yleson opened 5 years ago

yleson commented 5 years ago

Reproduction link

https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html

Steps to reproduce

1.打开demo链接：https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html
2.用下面代码替换模版全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="折线图平移">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />

</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2-all.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <div class="chart-wrapper">
    <div style="height: 120px"></div>
    <canvas id="mountNode"></canvas>
  </div>
  <script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/f2/linear-pan.json', function(data) {
    var chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      release: {
        min: 1990,
        max: 2010
      }
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: '#1890FF',
        padding: [3, 5]
      },
      nameStyle: {
        fill: '#fff'
      },
      onShow: function onShow(ev) {
        var items = ev.items;
        items[0].name = items[0].title;
      }
    });
    chart.interval().position('release*count');
    chart.interaction('pan');
    chart.scrollBar({
      mode: 'x',
      xStyle: {
        offsetY: -5
      }
    });
    chart.coord({
      transposed: true
    });

    // 绘制 tag
    chart.guide().tag({
      position: [1969, 1344],
      withPoint: false,
      content: '1,344',
      limitInPlot: true,
      offsetX: 5,
      direct: 'cr'
    });
    chart.render();
  });
</script>

</body>
</html>

What is expected?

触摸点是正确的，选中手指位置的数据

What is actually happening?

触摸点向下偏移，偏移量为canvas的y值

Environment Info
f2 3.4.2
System Mac 10.15
Browser Chrome 77.0.3865.90
yleson commented 5 years ago

求官方出修复一下哇，被产品经理怼死了

luckymore commented 5 years ago

@yleson 长摁可以显示 tooltip ，不过兄弟你这竖向滚动，产品能接受吗？

我想要上下滑动 实际是左右滑，上下动

yleson commented 5 years ago

@yleson 长摁可以显示 tooltip ，不过兄弟你这竖向滚动，产品能接受吗？

我想要上下滑动 实际是左右滑，上下动

我也是左右滑，上下滚动；官方说不支持y轴手势上下滑动，让开发用div嵌套设置overflow