Nothing Particularly Magnificent

    @seven_tantan/f2

    3.1.1-beta.6 • Public • Published

    F2: 基于 HTML5 Canvas,开箱即用的移动端可视化解决方案

    不要下载,不要下载

    npm package NPM downloads Percentage of issues still open

    F2(Fast && Flexible),是一套面向移动端的基于可视化图形语法的解决方案,具有精简、高性能、易扩展的特性,适用于对性能、大小、扩展性要求很高的场景。

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

    安装

    $ npm install @antv/f2

    特性

    • ✔︎ 灵活且易扩展:灵活的按需引入机制,并提供自定义 Shape 以及动画机制,基于图形语法灵活绘制图表,满足你无限的创意
    • ✔︎ 高性能:性能极致追求,针对移动设备做了大量的优化
    • ✔︎ 精简:精简版(简单折柱饼)压缩后不到 100k,完整版本压缩后 152k
    • ✔︎ 丰富的图表类型:支持 20+ 图表类型

    正在建设中

    • [x] 动画支持
    • [ ] 丰富交互功能
    • [ ] 多平台支持

    文档

    快速开始

    <canvas id="c1"></canvas>
    import F2 from '@antv/f2';
    
    const data = [ 
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ];
    
    const chart = new F2.Chart({
      id: 'c1',
      width: 500,
      height: 300  
    });
    
    chart.source(data);
    chart.interval().position('genre*sold').color('genre');
    chart.render();

    更多示例:demos

    demos

    本地开发

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

    如何贡献

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

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

    License

    MIT license.

    Install

    npm i @seven_tantan/f2

    DownloadsWeekly Downloads

    0

    Version

    3.1.1-beta.6

    License

    none

    Unpacked Size

    2.03 MB

    Total Files

    226

    Last publish

    Collaborators

    • seven_tantan