Comments (13)
目前 F2 没有开放事件接口,目前你这个需求的话,可以通过监听 canvas 元素上的 touchStart 事件,通过坐标来查找被点击的坐标轴文本 Shape,目前的方法操作了太多的内部属性,后续我会进行优化的,目前刚好也在集中进行交互和动画的加强优化,欢迎多提意见:
$('#mountNode').on('touchstart', function(e) {
const canvas = chart.get('canvas');
const point = {
x: e.targetTouches[0].clientX,
y: e.targetTouches[0].clientY
};
const canvasPoint = F2.Util.getRelativePosition(point, canvas); // 将坐标转换为 canvas 相对坐标
const backPlot = chart.get('backPlot'); // 默认坐标轴文本位于 backPlot 容器中
const axisContainer = backPlot.get('children')[0];
const axisShapes = axisContainer.get('children');
// findShape
let clickedShape;
F2.Util.each(axisShapes, s => {
const bbox = s.getBBox();
if (canvasPoint.x >= bbox.minX && canvasPoint.x <= bbox.maxX
&& canvasPoint.y >= bbox.minY && canvasPoint.y <= bbox.maxY) {
clickedShape = s;
console.log(s);
return false;
}
});
if (clickedShape) {
console.log(clickedShape.attr('text')); // 被点击的坐标轴文本内容
}
});
from f2.
有的,下面是我们的钉钉群。
另外想请教下,您的 x 轴上的这种交互的具体场景是什么,是移动场景下的吗?我想了解下~~~ 哈哈
from f2.
我刚在G2 api下找到事件,但是应用到F2下不可用~场景是:统计一年销售额,点击x轴查看月份下,独立的各个部门的销售额(可以理解为数据下钻)。
from f2.
经测试,上诉代码报以下错误:F2.Util.getRelativePosition is not a function
from f2.
打印F2.Util可见只有
from f2.
Array
:
{merge: ƒ, values: ƒ, firstValue: ƒ, group: ƒ, groupToMap: ƒ, …}
deepMix
:
ƒ deepMix()
each
:
ƒ each(elements, func)
fixedBase
:
ƒ fixedBase(v, base)
getWrapBehavior
:
ƒ getWrapBehavior(obj, action)
indexOf
:
ƒ indexOf(arr, element)
isArray
:
ƒ isArray()
isBoolean
:
ƒ isBoolean(value)
isDate
:
ƒ isDate(value)
isFunction
:
ƒ isFunction(fn)
isNil
:
ƒ isNil(o)
isNumber
:
ƒ isNumber(value)
isObject
:
ƒ (value)
isPlainObject
:
ƒ isPlainObject(o)
isString
:
ƒ isString(value)
lowerFirst
:
ƒ lowerFirst(s)
mix
:
ƒ mix(dist, obj1, obj2, obj3)
parsePadding
:
ƒ parsePadding(padding)
upperFirst
:
ƒ upperFirst(s)
wrapBehavior
:
ƒ wrapBehavior(obj, action)
from f2.
升级下 F2 的版本~~~ 用最新版本稳定版本 3.1.3
from f2.
请查阅,是否还要引入f2-common/f2-simple 等文件?
from f2.
我在f2-common文件中依旧没发现getRelativePosition函数。
from f2.
- 不需要引入 f2-common/f2-simple,这些是 F2 的简化版本,3.1.3 版本以上都会有 F2.Util 上的方法的
- 升级的时候可以先删除原先的 node_modules,再 npm install
- 你可以在你的页面上打印 F2.version 查看当前的版本
- 确定下,您是直接引用 @antv/f2. 而不是微信小程序版本吧,我的回答都是基于你直接使用 @antv/f2 的npm 模块的
const F2 = require('@antv/f2');
console.log(F2.version)
console.log(F2.Util)
from f2.
经查源码,发现DomUtil包含getRelativePosition函数,Util.mix(Util, DomUtil); 也复制了该方法。 应该是安装版本时没删除,使用覆盖导致上述无法查找到getRelativePosition方法。现已正常,多谢。
from f2.
😄 👍
from f2.
有的,下面是我们的钉钉群。
另外想请教下,您的 x 轴上的这种交互的具体场景是什么,是移动场景下的吗?我想了解下~~~ 哈哈
有的,下面是我们的钉钉群。
另外想请教下,您的 x 轴上的这种交互的具体场景是什么,是移动场景下的吗?我想了解下~~~ 哈哈
请问现在钉钉群链接可以更新下吗,这个二维码已经失效了
from f2.
Related Issues (20)
- 怎么在vite5+vue3的项目中使用anti/f2
- render failed when using react and antv/f2 sunburst HOT 1
- data值展示成label
- TextGuide和ScrollBar连用会出现视觉bug,未展示的值会在y轴旁出现
- 请问雷达图的角如何设置radius圆角?
- 【堆叠柱形图】如何获取每个柱子的最上方的位置,目前只能取到points,也就是按照分组柱形图的柱形位置 HOT 2
- 4.x 版本折线图Area绘制错误
- 请问有计划提供鸿蒙 Next 支持的版本吗?预计什么时间会出一个 Realease 版本呢?
- 文档落后代码,要看源代码,才知道有新功能
- 求教各位为什么我的微信小程序依赖包这么大?是我用的方法不对吗还是? HOT 1
- [F2] (Text Shape) 使用多行文本布局后的坐标轴标签在图表整体布局不正确
- 新版本可以通过API的方式使用么
- 4.x版本如何在PC端实现demo中柱状图平移效果 HOT 2
- Legend 数据多了如何平移滚动 HOT 1
- vite打包后访问页面报错
- 折线图平移:拖动图表事件未定义 Event is not defined
- 为什么官网的示例这么不清晰,左侧缩略图的demo和打开后右侧看到的不同
- 设置为横屏时,折线图手势方向任然是左右才能触发 tooltip,触发方向不对 HOT 1
- chart不会根据canvas自适应内容 HOT 3
- F2 如何自定义 Tooltip 的内容和样式 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from f2.