收藏
评论

又淘到一个图表库,阿里开源的,感觉比echarts更轻量,还好用,还多样

        最近一直在寻找一个相对比较好的图表库做统计,之前用echarts,虽然满足了部分需求,但还是有些有点丑,后来多找找,终于找到了阿里开源的一款叫F2的图表库。

        官方描述:F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex),完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

        演示:扫二维码


npm package NPM downloads Percentage of issues still open <p align="left"> <a href="https://twitter.com/intent/tweet?text=Introducing%20F2,%20an%20elegant,%20interactive%20and%20flexible%20charting%20library%20for%20mobile.&url=https://medium.com/@SimaZwx/https-medium-com-simazwx-introducing-f2-c44fb4e74c2d&hashtags=javascript,mobile,charts,dataviz,visualization,F2"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a> </p>

中文 README

F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects.

<p align="center"><a href="https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html"><img src="https://user-images.githubusercontent.com/6628666/44565498-f4e12c80-a79a-11e8-98fc-73ee58547dc9.png" /></a></p>

Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

Installation

$ npm install @antv/f2

Features

Born for mobile

  • Design for mobile: make data more alive and chart interactions more natural. <p align="left"><img src="https://user-images.githubusercontent.com/6628666/44565525-21954400-a79b-11e8-8d69-cd95fa6b9a99.gif" width="600"></p> <p align="left"><img src="https://user-images.githubusercontent.com/6628666/44565524-21954400-a79b-11e8-9aea-9e38d458e37b.gif" width="600" ></p>

  • Performance: small package size(version without interaction is 44k after gzip) with great rendering performance.

  • Compatibility: multi-end, Multi-runtime support. Besides H5 env, F2 can also run in Node.js, Weex rendering and React Native, also 支付宝小程序 and 微信小程序.

<p align="center"><img src="https://gw.alipayobjects.com/zos/rmsportal/cPUduuYgROeJwRJSRuFK.png"></p>

All the chart types you want

With the power of grammar of graphics, F2 supports data-driven 50+ chart types(the amount can be even more, which is depended on you) including classical charts such as line, column/bar chart, pie chart, scatter plot, gauges, etc. Additionally, F2 also provides feature-riched chart components, such as Tooltip, Legend and Guide.

Flexible and Interactive

We also provide developers with flexible extension mechanisms, including shape, animation, and interactive customization capabilities, as well as flexible styling to meet a variety of personalized charting requirements.

<img src="https://user-images.githubusercontent.com/6628666/44565579-6c16c080-a79b-11e8-9494-86f3ad477341.gif" width="200"><img src="https://user-images.githubusercontent.com/6628666/44565581-6c16c080-a79b-11e8-8210-f4e797480e87.gif" width="200"><img src="https://user-images.githubusercontent.com/6628666/44565580-6c16c080-a79b-11e8-956d-4d15455468a3.gif" width="200"><img src="https://user-images.githubusercontent.com/6628666/44565583-6caf5700-a79b-11e8-8e9e-a1fa12ddcbf1.gif" width="200">

Links

  • Website
  • English documents: https://antv.gitbook.io/f2/
  • Chart demos: https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html
  • 中文文档: https://antv.alipay.com/zh-cn/f2/3.x/api/index.html

Other libraries base on F2

  • ant-design-mobile-chart: Ant Design Mobile Chart based on F2. (React).
  • BizGoblin:Data visualization library based F2 and React.
  • VChart: Mobile Chart Components based on vux and F2. (Vue).
  • weex-chart: Chart components based on Weex and F2.

Demos

Chart Demos

Or just scan the below qrcode to see demos in mobile:

<img src="https://gw.alipayobjects.com/zos/rmsportal/nzlxIzUBlBRVGMyaZigG.png" style="width:150px;">

Getting Started

<img src="https://gw.alipayobjects.com/zos/rmsportal/NhtfmoKOInnHYrdWTfqh.png" width="375">

<canvas id="mountNode"></canvas>
import F2 from '@antv/f2';

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 F2.Chart({
  id: 'mountNode',
  width: 375,
  height: 265,
  pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.interval().position('year*sales');
chart.render();

Development

$ npm install

# run test case
$ npm run test-live

# build watching file changes and run demos
$ npm run dev

# run demos
$ npm run demos

# run pack
$ npm run bundler

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.

License

MIT license.

最后一次编辑于  2018-10-25
收藏

12 个评论

  • 梁海涛
    梁海涛
    2019-03-01

    学习永无止境,对程序的爱好始终如一,我的开源项目

    https://github.crmeb.net/u/demo

    一起和大神学习交流



    2019-03-01
    赞同 1
    回复 1
    • 2019-04-15

      梁总也在

      2019-04-15
      回复
  • 2019-06-13

    F2 在小程序中必须绝对定位  这咋解决啊

    2019-06-13
    赞同
    回复 1
    • chen
      chen
      2019-06-14

      没要求决定定位啊,我都是再父级view自己写规则

      2019-06-14
      回复
  • 阿巴阿巴
    阿巴阿巴
    2019-02-26

    项目也在用这个😄😄😄

    2019-02-26
    赞同
    回复
  • h
    h
    2019-02-09

    微信交流 zhaohe012

    2019-02-09
    赞同
    回复
  • 黎😄
    黎😄
    2019-01-10

    挺好哦。

    2019-01-10
    赞同
    回复
  • charles
    charles
    2018-12-22

    这个真的很酷

    2018-12-22
    赞同
    回复
  • F
    F
    2018-12-07

    横坐标轴为非数字类的分类,要使用平移滑动   如何做到   遇到这个问题了  一直找不到解决方案   文档翻遍了  找不到相关的。。只有为纯数字或者timecat时才可以出现平移,如果是汉字或者其他分类的   不管多少  都是一屏显示完。。无法平移  求助

    2018-12-07
    赞同
    回复 1
    • 康明
      康明
      2019-04-09

      小程序 :   简易组件管理  ,你看看是不是这样折线图平滑

      2019-04-09
      回复
  • F
    F
    2018-12-05

    感觉挺好  已经在用了

    2018-12-05
    赞同
    回复
  • 小小篮子
    小小篮子
    2018-11-20

    没有关系图么

    2018-11-20
    赞同
    回复
  • Mdeity
    Mdeity
    2018-11-16

    请问楼主,项目中使用网络数据加载图表,该怎么处理

    2018-11-16
    赞同
    回复

正在加载...

登录 后发表内容