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

iamllitog · 2018-09-10T08:44:24Z

F2 Version:3.2.2
Platform:Redmi 5A, MiUi 9.6, Android 7.1.2
Mini Showcase(like screenshots):
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则正常，麻烦看下是本应如此吗？

The text was updated successfully, but these errors were encountered:

simaQ · 2018-09-11T06:43:40Z

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

如果横轴是分类数据的话，你需要保证横轴的数据必须是严格意义的字符串，只通过以下的方式不可取。

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

另外，对于分类类型，pan 平移的交互不需要设置 limitRange，我们会自动将其限定在 x 轴的数值范围内
我们在创建 line 的时候，还需要声明 sortable 为 false，以组织内部的排序导致线图错乱（默认情况下我会对线图、区域图的数据按照横轴进行排序的）

  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();

fix: when the points is empty, return. Closed #316.

simaQ · 2018-09-11T07:00:06Z

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

iamllitog · 2018-09-11T07:52:31Z

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

simaQ self-assigned this Sep 10, 2018

simaQ closed this as completed 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

0b952bd

fix: when the points is empty, return. Closed #316.

simaQ added this to the 3.2.3 milestone Sep 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

iamllitog commented Sep 10, 2018 •

edited

Loading

simaQ commented Sep 11, 2018

simaQ commented Sep 11, 2018

iamllitog commented Sep 11, 2018

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

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

Comments

iamllitog commented Sep 10, 2018 • edited Loading

simaQ commented Sep 11, 2018

simaQ commented Sep 11, 2018

iamllitog commented Sep 11, 2018

iamllitog commented Sep 10, 2018 •

edited

Loading