Nanobots Protecting Microbots

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

    4.1.39 • Public • Published

    English | 简体中文

    G2

    一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

    CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

    网站教程文档博客G2Plot

    G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

    📺 线上示例

    特性

    • 💯 完善的图形语法:数据到图形的映射,能够绘制出所有的图表。
    • 🤩 全新的交互语法:通过触发和反馈机制可以组合出各种交互行为,对数据进行探索。
    • 🦍 强大的 View 模块:可支持开发个性化的数据多维分析图形。
    • 👬 双引擎渲染:Canvas 或 SVG 任意切换。
    • 💄 可视化组件体系:面向交互、体验优雅。
    • 🛡 全面拥抱 TypeScript:提供完整的类型定义文件。

    📦 安装

    $ npm install @antv/g2

    🔨 快速上手

    在绘图前我们需要为 G2 准备一个 DOM 容器:

    <div id="c1"></div>
    import { Chart } from '@antv/g2';
    
    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 Chart({
      container: 'c1', // 指定图表容器 ID
      width: 600, // 指定图表宽度
      height: 300, // 指定图表高度
    });
    
    // Step 2: 载入数据源
    chart.data(data);
    
    // Step 3: 创建图形语法,绘制柱状图
    chart.interval().position('genre*sold');
    
    // Step 4: 渲染图表
    chart.render();

    ⌨️ 本地开发

    # 安装依赖
    $ npm install
    
    # 运行测试用例
    $ npm run test
    
    # 打开 electron 运行测试用例,监听文件变化构建
    $ npm run test-live
    
    # 运行 CI
    $ npm run ci
    
    # 运行网站
    $ npm start

    🏷️ 版本

    你也可以在业务中使用基于 G2 封装的常规统计图表 G2Plot,可以使用配置的方式快速生成一个通用图表,降低开发者的使用成本。

    🤝 如何贡献

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

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

    Let's fund issues in this repository

    联系我们

    钉钉群组号码: 30233731 / 35686967 (2 群)

    Install

    npm i @antv/g2

    DownloadsWeekly Downloads

    75,464

    Version

    4.1.39

    License

    MIT

    Unpacked Size

    11.6 MB

    Total Files

    1561

    Last publish

    Collaborators

    • 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