这篇博客介绍了如何在AntV的F2库中创建一个包含百分比文字的环形图。通过在原有示例的基础上添加两行代码，实现了在饼图扇区上展示百分比数值的功能。示例代码详细展示了自定义Shape的过程，并提供了完整的图表绘制和数据显示的实现。
是在原有例子上添加了两行代码，测试过的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="chart-name" content="带 iconfont 的饼图">
<title>F2 图表组件库 - AntV</title>
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
<style>
@font-face {
font-family: 'charts-icon'; /* project id 750097 */
}
</style>
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.0/f2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<div class="chart-wrapper">
<canvas id="mountNode"></canvas>
</div>
<script>
var fontSize = 12 * (window.innerWidth / 375); // 字体适配不同屏幕
// 根据角度和圆心求坐标
function _getE
最低0.47元/天 解锁文章
2949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
