g2 canvas 绘图不要靠近顶部_数据可视化AntV—G2让数据栩栩如生

让数据栩栩如生

AntV，让数据栩栩如生

随着基础科学的进步，人类拥有的硬件设备越来越先进，紧接着软件的发展人类不仅仅满足于实用，更注重体验。数据大屏可视化就是应人类对于体验的要求应运而生的。

关于数据可视化的产品有很多，估计小伙伴们最为熟悉的就是百度的Echarts，Echarts经过了很长一段时间的发展，现在越来越趋于稳定，可谓是老牌强队。当然也有很多后起之秀，可谓是长江后浪推前浪。今天小编就给大家介绍一下阿里的AntV-G2。

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

AntV下面有很多产品

• G2可视化引擎—数据驱动，高度易用，可扩展的可视化图形语法
• G6图可视化引擎—便捷的关系数据可视化引擎与图分析工具
• F2移动可视化方案—专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境
• L7地理空间数据可视化—高性能/高渲染质量的地理空间数据可视化框架

Antv产品

今天给大家讲解一下G2

G2 可视化引擎

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

G2

安装

//  1. 通过 npm 安装//  npm install @antv/g2 --save//  成功安装完成之后，即可使用 import 或 require 进行引用。import { Chart } from '@antv/g2';const chart = new Chart({  container: 'c1',  width: 600,  height: 300,});   2.浏览器引入//   既可以通过将脚本下载到本地也可以直接引入在线资源既可以通过将脚本下载到本地也可以直接引入在线资源

使用

//  1. 创建 div 图表容器//  在绘图前我们需要为 G2 准备一个 DOM 容器：柱状图

这样，你的第一个柱状图就绘制完成了

柱形图

下面给大家介绍一些精美常用的图表组件

分布图

热力图

仪表盘

地图

词云

分面