AntV-F2–超强大F2移动端可视化图表方案

今天给大家分享一款超优秀的移动端可视化方案F2。

超强大 F2 移动端可视化图表方案AntV-F2

antv-F2 蚂蚁金服研发的移动端图表可视化方案,star高达7.3K 。完美支持H5,兼容多种环境(Node、小程序、Weex)专业的移动端图表体验。

超强大 F2 移动端可视化图表方案AntV-F2
超强大 F2 移动端可视化图表方案AntV-F2
超强大 F2 移动端可视化图表方案AntV-F2

功能特性

  • 专注移动-体验优雅:围绕设计、性能以及异构环境,为用户提供移动端图表的最佳实践。
  • 图表丰富-组件完备:基于图形语法,可灵活构建各类图表(50 ),组件完备,覆盖各类场景。
  • 扩展灵活-创意无限:插件机制,图形、动画、交互均可灵活扩展,使用更自由。
超强大 F2 移动端可视化图表方案AntV-F2

安装

$ npm i @antv/f2 -S

引入插件

安装成功后,即可使用import或浏览器引入。

import { Chart } from \'@antv/f2\';

<script src="https://unpkg.com/@antv/f2@3.7.7/dist/f2.js">script>

<script src="./f2.js">script>
超强大 F2 移动端可视化图表方案AntV-F2
超强大 F2 移动端可视化图表方案AntV-F2

使用插件


<canvas id="myChart" width="400" height="260">canvas>
<script>
  const data = [
    { genre: \'Sports\', sold: 275 },
    { genre: \'Strategy\', sold: 115 },
    { genre: \'Action\', sold: 120 },
    { genre: \'Shooter\', sold: 350 },
    { genre: \'Other\', sold: 150 },
  ];
  
  // Step 1: 创建 Chart 对象
  const chart = new F2.Chart({
    id: \'myChart\',
    pixelRatio: window.devicePixelRatio // 指定分辨率
  });
  
  // Step 2: 载入数据源
  chart.source(data);
  // Step 3: 绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
  chart.interval().position(\'genre*sold\').color(\'genre\');
  
  // Step 4: 渲染图表
  chart.render();
script>
超强大 F2 移动端可视化图表方案AntV-F2

运行效果图

小程序上渲染 F2

为了使用方便,分别对支付宝小程序和微信小程序分装了自定义组件,官网上的demo都是可以在小程序中运行。

超强大 F2 移动端可视化图表方案AntV-F2

F2在不同环境下功能对比

  • 聊一聊 F2 与小程序
https://www.yuque.com/antv/blog/bg9sxf
  • F2 的微信小程序版本
https://github.com/antvis/wx-f2
  • F2 的支付宝小程序版本
https://github.com/antvis/my-f2
超强大 F2 移动端可视化图表方案AntV-F2
超强大 F2 移动端可视化图表方案AntV-F2

丰富齐全的官方文档及API使用。

超强大 F2 移动端可视化图表方案AntV-F2
超强大 F2 移动端可视化图表方案AntV-F2

覆盖蚂蚁会员、支付宝月账单、个人总资产等业务场景。

超强大 F2 移动端可视化图表方案AntV-F2

广泛应用于基金、定期、黄金、股票等各个金融业务场景中,支撑着蚂蚁财富 app 上众多可视化场景。

超强大 F2 移动端可视化图表方案AntV-F2

so good,真的是非常强的一款多功能移动端图表解决方案,大家不要错过!

最后附上文档及项目地址

# 文档地址
https://f2.antv.vision/
# 图表演示
https://github.com/antvis/f2
# 仓库地址
https://github.com/antvis/f2

ok,就分享到这里。如果小伙伴们有其它好的移动端图表插件,欢迎一起学习交流。

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/11377.html

发表评论

登录后才能评论