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