@antv/f2 建立横向滚动条时 scrollBar 找不到的处理方法

最新推荐文章于 2024-12-25 15:39:38 发布

原创最新推荐文章于 2024-12-25 15:39:38 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#钉钉小程序 #antv/f2 #scrollBar #dd #Chart

钉钉小程序专栏收录该内容

2 篇文章

订阅专栏

这篇博客分享了一种在F2图表库中创建图表的方法，特别是如何处理`getElementById`错误并采用`context`来创建图表。文章详细介绍了引入ScrollBar和pan插件，以及设置滚动条样式和启用平移交互的过程，为读者提供了在F2中实现图表滚动和缩放功能的实例。

  onInitChart(F2, config) {
  //console.log(JSON.stringify(config) + config['context']);
  //const F2 = require('@antv/f2/lib/index')
 
  const ScrollBar = require("@antv/f2/lib/plugin/scroll-bar");
 
  const pan = require("@antv/f2/lib/interaction/pan");
 
 
 //这里新建chart 对象的时候跟网上他们的设定方式不同，他们的创建方式我这边会提示  getElementById 
 //错误 弄了很久才搞定这种创建方式 利用context创建 网络上这方面资料比较少 特此分享 提供思路
  chart = new F2.Chart({
    context: config['context'],
    width:375,height:250,pixelRatio:2,
    plugins: [ScrollBar,pan] 
  });

   // 定义进度条 注意大小写 前面虽然定义了ScrollBar 但是文件里面引用方法名是scrollBar
    //这里也是个容易出错的地方
    chart.scrollBar({
      mode: 'x',
      xStyle: {
        backgroundColor: '#e8e8e8',
        fillerColor: '#808080',
        offsetY: -2
      }
    });
    chart.interaction('pan');
}