Comments (3)
原因是这样的:
chartC = randerChartC(items[0].value);
tooltip 在处理的时候,将数值类型的数据转换为了字符串数据,所以 items[0].value 返回的是 '88',而饼图对数据的定义是强类型的(即必须是数字必须是数值类型),所以导致绘制出问题,你这样处理下就可以了。
chartC = randerChartC(items[0].value * 1);
另外,这处用法要纠正下:
if (chartC) chartC.clear();
你调用 clear 的话,chartC 对象还是会存在的,它创建的 canvas 对象也会存在,它只是清空画布的内容,但是按照你的逻辑,你清空之后又重新创建新的 chart 对象。建议直接使用 chartC.destroy()
,直接销毁。
PS: 你写的这个 demo 用 tooltip 的 onShow() 钩子还挺妙的,哈哈。
var data = [
{
year: "人品",
sales: 88
},
{
year: "团队意识",
sales: 92
},
{
year: "学习能力",
sales: 78
},
{
year: "执行力",
sales: 100
},
{
year: "协调能力",
sales: 82
}
];
renderChartR();
var chartC = randerChartC(88);
function renderChartR() {
var chart = new F2.Chart({
id: "mountNode",
width: 400,
height: 200,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
sales: {
nice: true,
min: 0,
max: 100
}
});
chart.tooltip({
triggerOn: ["click"],
showItemMarker: false,
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = items[0].value;
chartC = randerChartC(items[0].value * 1);
}
});
chart
.interval()
.position("year*sales")
.style({
fill: "#3571db"
});
chart.render();
}
function randerChartC(num) {
if (chartC) chartC.destroy();
if (!num) return;
var color;
if (num >= 0 && num < 60) {
color = "#fd452a";
} else if (num >= 60 && num < 70) {
color = "#303030";
} else if (num >= 70 && num < 90) {
color = "#357edb";
} else if (num >= 90 && num <= 100) {
color = "#02602e";
}
var data = [
{
x: "1",
y: num
}
];
var chart = new F2.Chart({
id: "jxpf",
width: 175,
height: 175,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
y: {
max: 100,
min: 0
}
});
chart.axis(false);
chart.tooltip(false);
chart.coord("polar", {
transposed: true,
innerRadius: 0.8,
radius: 0.85
});
chart.guide().arc({
start: [0, 0],
end: [1, 99.98],
top: false,
style: {
lineWidth: 15,
stroke: "#ccc"
}
});
chart.guide().text({
position: ["50%", "50%"],
content: num + "分",
style: {
fontSize: 20,
fill: color
}
});
chart
.interval()
.position("x*y")
.size(15)
.style({
fill: color
})
.animate({
appear: {
duration: 1200,
easing: "cubicIn"
}
});
chart.render();
return chart;
}
from f2.
我看下哦
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.