antvg2 环图轮播_antv-g2plot

G2Plot

基于图形语法(the Grammar of Graphics)的图表库。

g2plot

g2plot.svg

G2Plot

badge.svg?branch=master

master.svg

g2plot.svg

g2plot.svg

一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,『G2Plot』中的 G2 即意指图形语法 (the Grammar of Graphics),同时也致敬了 ggplot2。我们想做的事有三件:

使用户不用成为可视化专家也能够轻松制作出优雅美观的图表。

保证图表能够经受得起业务的检验,在真实的场景中易用、好用。

探索统计图表的更多可能性,使统计图表变得更好玩、更酷。

09826e9aab8ceac3c36d4487b4d43877.png

特性

📦 开箱即用、体验优雅的高质量统计图表

G2Plot 呈现给用户的是一套提炼自企业级产品的视觉语言和设计规范。不仅对图表的整体视觉样式进行了优化,并且针对每一个图表自身的特点,沉淀出一套最佳配置,保证用户能够通过最少的配置制作出优雅、标准的图表。

56b7752401c51ab732cf6596265947dd.png

📊 响应式:让图表更聪明

在现实的图表应用场景中,一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量,造成极值情况下文本的重叠遮挡、内容无法自适应、内容裁剪等问题。G2Plot 借鉴宽容性设计的思想,在图表的信息密度过高时,对图表辅助信息进行抽稀,保证图表主要信息的展示和基本可读性。

eb411a91dd658542ab6fd2c508f324c6.png

🔳 向前一步:会讲故事的图表

在 G2Plot 体系下,图表不仅仅只是各不相关的实例,图层概念的引入提供了多图表组合、叠加、联动,共同讲述一个数据故事的可能性。未来,我们还将探索统计图表转化信息图的可能性,丰富统计图表的表现能力。

31a16f035be739960202a6ddaf35ea9f.gif

安装

$npm install @antv/g2plot

使用

ff78563110b60c1eb18e2e11ac461fd5.png

import { Bar } from '@antv/g2plot';

const data = [

{ year: '1951 年', sales: 38 },

{ year: '1952 年', sales: 52 },

{ year: '1956 年', sales: 61 },

{ year: '1957 年', sales: 145 },

{ year: '1958 年', sales: 48 },

];

const bar = new Bar('container', {

data,

xField: 'sales',

yField: 'year',

seriesField: 'year',

});

bar.render();

参与贡献

我们非常欢迎你的贡献!无论是 issue 还是 PR。

反馈问题请先阅读 issues。

提交代码请遵循 贡献指引。

联系我们

钉钉群组号码: 30233731

相关链接

chartcube-logo-cube.svg ChartCube - 基于 G2Plot 的在线图表制作工具,交互简单,一键导出图表代码!

许可证

MIT

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antv-g2中,可以通过设置饼图的color字段来设置饼图的颜色。如果要设置颜色渐变,可以使用linear-gradient或radial-gradient等CSS渐变样式。具体步骤如下: 1. 在color字段中使用一个渐变的CSS样式。例如: ```javascript const data = [ { type: '分类1', value: 27 }, { type: '分类2', value: 25 }, { type: '分类3', value: 18 }, { type: '分类4', value: 15 }, { type: '分类5', value: 10 }, { type: '分类6', value: 5 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data); chart.coord('theta', { radius: 0.75 }); chart.intervalStack() .position('value') .color('type', [ 'linear-gradient(135deg, #c9dfdb 0%, #e3e7e9 100%)', 'linear-gradient(135deg, #a3dbd4 0%, #d5e1dd 100%)', 'linear-gradient(135deg, #69c2b0 0%, #a3dbd4 100%)', 'linear-gradient(135deg, #5fa8d3 0%, #8fc3e9 100%)', 'linear-gradient(135deg, #547ba4 0%, #8fc3e9 100%)', 'linear-gradient(135deg, #4b5c77 0%, #547ba4 100%)' ]) .label('type', { offset: -20 }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render(); ``` 这个例子中,使用了linear-gradient样式来设置饼图的颜色。其中,每个颜色都是一个渐变的CSS样式,可以根据需要进行调整。 2. 在color字段中使用一个回调函数,根据数据动态生成渐变样式。例如: ```javascript const data = [ { type: '分类1', value: 27 }, { type: '分类2', value: 25 }, { type: '分类3', value: 18 }, { type: '分类4', value: 15 }, { type: '分类5', value: 10 }, { type: '分类6', value: 5 } ]; const chart = new G2.Chart({ container: 'container', forceFit: true, height: 500 }); chart.source(data); chart.coord('theta', { radius: 0.75 }); chart.intervalStack() .position('value') .color('type', function(val) { return 'linear-gradient(135deg, #fff 0%, ' + (val % 2 === 0 ? '#69c2b0' : '#547ba4') + ' 100%)'; }) .label('type', { offset: -20 }) .style({ lineWidth: 1, stroke: '#fff' }); chart.render(); ``` 这个例子中,使用了一个回调函数来动态生成渐变样式。根据数据的奇偶性判断使用哪种颜色渐变。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值