AntV F2 爬坑总结

3,143 阅读3分钟

F2掉坑总结

项目概况

本项目是一个纯html页面,提供给app的webview使用

初期

  • HTML直接引入
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>

此时我感觉美滋滋的,哇舒服

中期

chart.interaction('pan');
chart.scrollBar({
      mode: 'x',
      xStyle: {
        offsetY: -5
      }
    });
Uncaught TypeError: chart.interaction is not a function at 
Uncaught TypeError: chart.scrollBar is not a function at 

what?🙀❓

难道是我的文件版本低了,嗯,新版本我来了,毕竟人家官方说了<!-- 友情提醒:请按需更新版本号。 -->

看看github上都有什么版本嘛,有3.4.4的嘛,找找https://gw.alipayobjects.com/os/antv/assets/f2/3.4.4/f2.min.js

抱歉,您请求的文件不存在!

。。。

试试别的

抱歉,您请求的文件不存在!

。。。

去问问官方吧

Issues

⚠️ Please use https://antv-issue-helper.surge.sh ⚠️
The issue which is not created via https://antv-issue-helper.surge.sh will be closed immediately.

哟!还行,这么专业

写个demo,发到我的网站上,操作系统,浏览器环境,期望行为,实际行为,ok提交。

疯狂搜索问题中,

  • 如何注册/使用插件
const F2 = require('@antv/f2/lib/index');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');

// 注册插件 ScrollBar
F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册,也可以给 chart 的实例注册

// 或者给具体的 chart 实例注册
const chart = new F2.Chart({
  id: 'canvas',
  plugins: ScrollBar
});

就没有在线资源吗,一天过去了

疯狂搜索问题中,

交互模块默认没有打包至 @antv/f2 模块包中。使用时需要手动引入,如下

// 首先引入 F2
const F2 = require('@antv/f2/lib/index');

// 引入所有的交互行为
require('@antv/f2/lib/interaction/');

// 如果只需要引入其中一种交互行为,那么请使用如下的方式
// 引入 pie-select
require('@antv/f2/lib/interaction/pie-select');

// 引入 interval-select
require('@antv/f2/lib/interaction/interval-select');

// 引入 pan
require('@antv/f2/lib/interaction/pan');

// 引入 pinch
require('@antv/f2/lib/interaction/pinch');

怎么都是require的,真的就没有在线资源吗,两天过去了,

额。。。,算了没有资源我自己弄吧,搜索怎么把node的库在浏览器中使用,

broswerfy可以做到,哈哈哈,素晴,搜索broswerfy,

三种打包工具有什么区别?

这是啥,webpack , broswerfy,gulp,嗯对啊,webpack也能用吧,开始整活

安装webpack,

编写index.js

引入F2

window.F2 = require('@antv/f2');
window.ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
require('@antv/f2/lib/interaction/');

哇,美滋滋,能用

后期

这折线图怎么滚不了啊,wdnmd,疯狂搜索,怎么都是各种小程序的,沃日

咦?这个人的引入F2的方式怎么跟我不一样啊 require('@antv/f2/lib/index');

改上,卧槽!怎么能用了,我给了我两巴掌,什么鬼,哈哈能滑动了。

咦!怎么一滑图没了,canvas怎么空了,疯狂搜索,擦,没有。F2什么鬼啊,我开始后悔了,没办法,都到这地步了,硬着头皮也得走下去

webpack搭建环境,安装F2,index.html,F2官网copy例子,运行,一切正常,wryyyyyyyyyyy,为什么我不行,删除无关代码,对比写法,没错啊,我们都差不多啊,。。。。。。

等等还有这里

  • 我的
const data = [
	{
		x:0,
		value:1
	},
	{
		x:0,
		value:1
	},
]
  • 它的
const data = [
	
		{
            release:1900,
            count:100
        },
        {
            release:1900,
            count:100
        },
	
]

难道是属性名,x改为limit,运行,运行正常,我。。。。wryyyyyyyyyy