Comments (8)
自己研究了一下,已经解决!是因为VUE的设计原理【生命周期】的问题。要使antv/f2能正常使用,必须要等【dom树全部加载完成】,具体做法是将执行方法置于 this.$nextTick(() => {})的函数体中。即this.$nextTick(() => {....your code..})。 最后感谢作者大大开发了这么好的东西。
from f2.
请贴下源码以及使用的 antv/f2 版本。
创建 chart 的时候,需要传入 canvas dom,我看看是不是这个原因。
from f2.
版本是最新版的3.1.1
代码: const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const chart = new this.$F2.Chart({
id: 'c1',
width: 375,
height: 265,
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.interval().position('year*sales');
chart.render();
其中c1是对应的dom id :<canvas id="c1" width="400" height="260"></canvas>
from f2.
这个 dom 是 吗?
<canvas id="c1"></canvas>
from f2.
正是
from f2.
vue 我不太熟悉,报这个错误应该是没有找到这个 dom 容器,你看下是不是 dom 容器还未加载导致的?
from f2.
在Chrome中 页面中该canvas已经渲染出来了:渲染为
from f2.
给作者小心心
from f2.
Related Issues (20)
- uniapp项目vue2版本使用npm install @antv/f2 --save安装后引入组件报错
- bug: examples javascript mouse hover codesandbox icon arise scroll bar icon malposed HOT 1
- uniapp 使用V3 3.8.10版本 android兼容问题,andorid显示错位
- 文档亟待丰富 HOT 1
- F2 v5.0.30 版本中 syncY 这个参数如何使用? HOT 4
- F2 v5.0.30 tooltip 组件中的onShow \ onHide 事件都取消了吗? HOT 3
- F2 v5.0.30 点击饼图 PieLabel 本身时不触发onClick 事件,只有点击引申出来的文本时才会触发? HOT 2
- 钉钉小程序无法使用@antv/f-my
- 请问f-my和f2-my这两个模块有什么区别
- antv-F2 5.0.3版本图表中的tooltip无法自定义显示的视图?或者提供下自定义的方法 HOT 1
- v5怎么设置padding呢?padding属性设置都没有效果了 HOT 3
- antv f2 5.x版本 tooltip展示时箭头错位
- 折线图和柱状图的tickCount显示不准确
- 饼图设置了选中样式,点击PieLabel中的文字时,对应的饼图块未展示选中样式?
- 怎么在vite5+vue3的项目中使用anti/f2
- render failed when using react and antv/f2 sunburst HOT 1
- data值展示成label
- TextGuide和ScrollBar连用会出现视觉bug,未展示的值会在y轴旁出现
- 请问圆环动画进度条动画如何从0开始?
- 【堆叠柱形图】如何获取每个柱子的最上方的位置,目前只能取到points,也就是按照分组柱形图的柱形位置 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.