Antv/G2 柱状图

Antv/G2 是一个基于图形语法的底层可视化引擎,提供图形和交互语法,易于使用且可扩展。只需简单语句即可创建交互式统计图表。其特点包括完善的图形语法、交互语法、强大的View模块、双引擎渲染和可视化组件体系,并全面支持 TypeScript。
摘要由CSDN通过智能技术生成

Antv/G2 教程

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

特点

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

最近项目中需要使用到 Antv/G2,先来一个小 demo 实现一下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AntV G2 是一款基于图形语法的可视化图表库,支持绘制多种类型的图表,包括柱状图、折线图等。要绘制分组柱状图和折线图混合的图表,可以使用 G2 的 ComboChart 组件。 首先,需要定义数据源,并指定数据字段的类型(例如 x 轴、y 轴等)。接着,可以使用 ComboChart 组件来绘制混合的图表。在 ComboChart 中,可以分别指定柱状图和折线图的样式、颜色等属性,如下所示: ```javascript import { Chart } from '@antv/g2'; const data = [ { year: '2010', sales: 450, profit: 200 }, { year: '2011', sales: 560, profit: 230 }, { year: '2012', sales: 620, profit: 250 }, { year: '2013', sales: 750, profit: 300 }, { year: '2014', sales: 800, profit: 350 }, ]; const chart = new Chart({ container: 'container', autoFit: true, height: 400, }); chart.data(data); chart.scale({ sales: { min: 0, }, profit: { min: 0, }, }); chart.axis('year', { label: { style: { fill: '#aaaaaa', }, }, }); chart.line().position('year*profit').color('#fdae6b'); chart.interval().position('year*sales').color('#2c7bb6'); chart.render(); ``` 在上面的代码中,我们定义了一个数据源,并指定了 x 轴和 y 轴的数据字段。接着,创建一个 Chart 实例,并指定容器,然后设置数据源和坐标轴的样式。最后,使用 line() 和 interval() 方法分别绘制折线图和柱状图,并指定它们的位置和颜色。 需要注意的是,ComboChart 支持多种混合图表类型,包括折线图、柱状图、面积图等,可以根据自己的需求选择适合的图表类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值