XUtils

G2

A highly interactive data-driven visualization grammar for statistical charts.

JavaScript
https://github.com/antvis/G2

✨ 特性

  • 💯 完善的图形语法：数据到图形的映射，能够绘制出所有的图表。
  • 🤩 全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索。
  • 🦍 强大的 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，可以使用配置的方式快速生成一个通用图表，降低开发者的使用成本。

联系我们

钉钉群组号码: 30233731 / 35686967 (2 群) / 44788198 （3 群）

Articles

  • coming soon...