AntV F2 折线图横向滚动问题

发布于 2022-09-12 23:10:01 字数 1218 浏览 24 评论 0

试着用AntV F2做个支持滚动的横屏折线图,看了下官方示例,设置横屏后,操作手势没有变过来,还是竖屏状态的左右方向,不知道有没有大佬踩过坑。
我是直接在官方示例横屏图基础上改的

fetch('https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json')
  .then(res => res.json())
  .then(data => {
    const originDates = [];
  const originSteps = [];
  const firstDayArr = [];
  data.forEach(function (obj) {
    if (obj.date >= '2018-05-01') {
      originDates.push(obj.date);
      originSteps.push(obj.steps);
    }

    if (obj.first) {
      firstDayArr.push(obj);
    }
  });

    const chart = new F2.Chart({
      id: 'container',
      pixelRatio: window.devicePixelRatio
    });
   chart.source(data, {
       release: {
         min: 1970,
         max: 2010
      }
    });
    chart.line().position('release*count');
    chart.point().position('release*count').style({
       lineWidth: 1,
       stroke: '#fff'
    });
    // 定义进度条
    chart.scrollBar({
     mode: 'x',
     xStyle: {
        backgroundColor: 'transparent',
        fillerColor: 'transparent',
         offsetY: -2
      }
    });
   chart.interaction('pan');
    chart.render();
  })

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文