New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x轴为cat类型时缩放困难,如果为linear则正常,代码如下 #316

Closed
iamllitog opened this Issue Sep 10, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@iamllitog

iamllitog commented Sep 10, 2018

  • F2 Version:3.2.2

  • Platform:Redmi 5A, MiUi 9.6, Android 7.1.2

  • Mini Showcase(like screenshots):
    image

  • CodePen Link:

<!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.2.1/f2-all.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <p style="text-align: center;">请使用手机扫码观看</p>
<script>
// Generate sample data
var data = [];
var step = Math.PI / 4;
for (var x = -25; x < 25; x += step) {
  data.push({
    x: x,
    y: Math.sin(x)
  });
}

var chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
});

chart.scale('x', {
  type: 'cat'
});

chart.source(data);
chart.axis('x', {
  grid: function grid(text) {
    if (text == 0) {
      return {
        lineDash: null
      };
    }
  }
});
chart.axis('y', {
  grid: function grid(text) {
    if (text == 0) {
      return {
        lineDash: null
      };
    }
  }
});
chart.tooltip(false);
chart.interaction('pan', {
  limitRange: {
    x: {
      min: -100,
      max: 100
    }
  }
});
chart.interaction('pinch', {
  maxScale: 5,
  minScale: 1
});
chart.line().position('x*y').shape('smooth');
chart.render();
</script>


</body>
</html>

x轴为cat类型时缩放困难,如果为linear则正常,麻烦看下是本应如此吗?

@simaQ simaQ self-assigned this Sep 10, 2018

@simaQ

This comment has been minimized.

Contributor

simaQ commented Sep 11, 2018

这里面有一个绘图的 BUG,我修复了。但是除去这个 BUG,你的写法也有问题:

  1. 如果横轴是分类数据的话,你需要保证横轴的数据必须是严格意义的字符串,只通过以下的方式不可取。
chart.scale('x', {
  type: 'cat '
})
  1. 另外, 对于分类类型,pan 平移的交互不需要设置 limitRange,我们会自动将其限定在 x 轴的数值范围内

  2. 我们在创建 line 的时候,还需要声明 sortablefalse,以组织内部的排序导致线图错乱(默认情况下我会对线图、区域图的数据按照横轴进行排序的)

  var data = [];
  var step = Math.PI / 4;
  for (var x = -25; x < 25; x += step) {
    data.push({
      x: x + '', // 转成字符串
      y: Math.sin(x)
    });
  }

  var chart = new F2.Chart({
    id: 'mountNode',
    animate: false,
    pixelRatio: window.devicePixelRatio
  });

  // chart.scale('x', {
  //  type: 'cat',
  // });

  chart.source(data);
  chart.axis('x', {
    grid: function grid(text) {
      if (text == 0) {
        return {
          lineDash: null
        };
      }
    }
  });
  chart.axis('y', {
    grid: function grid(text) {
      if (text == 0) {
        return {
          lineDash: null
        };
      }
    }
  });
  chart.tooltip(false);
  chart.interaction('pan');
  chart.interaction('pinch', {
    maxScale: 5,
    minScale: 1
  });
  chart.line({
    sortable: false
  }).position('x*y').shape('smooth');
  chart.render();

@simaQ simaQ closed this in 82d5c2c Sep 11, 2018

simaQ added a commit that referenced this issue Sep 11, 2018

Merge pull request #322 from antvis/fix-issue-316
fix: when the points is empty, return. Closed #316.
@simaQ

This comment has been minimized.

Contributor

simaQ commented Sep 11, 2018

@antv/f2@3.2.3-beta.1 版本修复了这个问题!

@simaQ simaQ added this to the 3.2.3 milestone Sep 11, 2018

@iamllitog

This comment has been minimized.

iamllitog commented Sep 11, 2018

好的 了解了 这个只是把官网的例子抓了抓改 很多地方都会注意的 谢谢~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment