Nautical Poseidon Mythology

    @antv/f2
    TypeScript icon, indicating that this package has built-in type declarations

    3.8.12 • Public • Published

    npm package NPM downloads Percentage of issues still open

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

    在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson,为 F2 的图形语法提供了理论基础!

    安装

    $ npm install @antv/f2

    特性

    专注移动,体验优雅

    • 轻量化呈现,自然反馈:在设计上我们以人为本,追求自然简单易懂,有吸引力的表达效果,让用户在碎片化的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内容和操作有机融合,符合人的自然行为反应,让交互操作更自然。

    • 轻巧流畅:F2 一直致力于追求极致的性能,针对移动设备做了大量的优化,在支持丰富(50+)图表的基础上同时保持代码量的小巧(不带交互版本 gzip 压缩后 44k,带所有交互版本 56k),同时提供模块化的设计以支持动态加载,提供更优的大小。

    • 多端异构:在完美支持 H5 环境的同时,同时兼容 Node.js支付宝小程序微信小程序React Native以及 Weex 端的渲染,一份代码,多设备多环境渲染。

    图表丰富,组件完备

    与传统的图表库不同,抛弃了特图特做的封装思路,基于强大的图形语法理论,以数据驱动,通过图形语法的组合灵活构建各类图表,目前可绘制 50+ 图表类型(当然,还可以更多),覆盖各类场景 在提供基础的图表可视化能力外,我们还提供了丰富图表功能组件,满足各种功能需求。

    扩展灵活,创意无限

    我们在提供最佳实践的同时,还为开发者提供了灵活的扩展机制,包括 Shape、动画以及交互的自定义能力,当然还有图表样式的个性化定制,满足各种个性化的图表要求。

    文档

    快速开始

    <canvas id="c1"></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: 'c1',
      width: 375,
      height: 265,
      pixelRatio: window.devicePixelRatio
    });
    
    chart.source(data);
    chart.interval().position('year*sales');
    chart.render();

    更多示例:demos

    手机扫码观看 demos

    本地开发

    $ npm install
    
    # 跑测试用例
    $ npm run test-live
    
    # 监听文件变化构建,并打开 demo 页面
    $ npm run dev
    
    # 打开 demo
    $ npm run demos
    
    # 按需打包
    $ npm run bundler

    如何贡献

    如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

    如需提交代码,请遵从我们的贡献指南

    体验改进计划说明

    F2 从 3.1.12(2018-06-20发布)版本开始添加了F2.track(true)方法。 目前我们的体验改进计划已经完成,所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果它给你带来麻烦,我们深表歉意。

    License

    MIT license.

    Install

    npm i @antv/f2

    DownloadsWeekly Downloads

    3,391

    Version

    3.8.12

    License

    none

    Unpacked Size

    3.4 MB

    Total Files

    486

    Last publish

    Collaborators

    • basketduck
    • biupiubiupiu
    • flash1
    • dreammy23
    • laixingui.lxg
    • zhangjunjie-loki
    • rainy25ghz
    • zeyuwang
    • yanxiong
    • susiwen8
    • freestyle21
    • soundquiet
    • elaine.q.10
    • sturuby
    • lviser
    • sakuya223
    • serializedowen
    • xdzhao
    • yangzhanmei
    • wjgogogo
    • leungwensen
    • dori
    • iaaron
    • yard
    • simaq
    • dxq613
    • intchous
    • susan_ann
    • jinke.li
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn