一、AntV的g2plot分组柱状图
优点:用处更广泛,用法更简单
缺点:tiptop以一组的形式展示(不影响使用)
效果图:
数据:
数据源格式为一个数组对象
const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4,
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2,
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5,
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7,
},
{
name: 'Berlin',
月份: 'May',
月均降雨量: 52.6,
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5,
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4,
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4,
},
];
实现代码:
官方版:
优点:api很全面
缺点:用法不太友好,得进一步封装才能使用
import { Column } from '@antv/g2plot';
const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4,
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2,
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5,
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7,
},
{
name: 'Berlin',
月份: 'May',
月均降雨量: 52.6,
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5,
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4,
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4,
},
];
const stackedColumnPlot = new Column('container', {
data,
isGroup: true,
xField: '月份',
yField: '月均降雨量',
seriesField: 'name',
/** 设置颜色 */
//color: ['#1ca9e6', '#f88c24'],
/** 设置间距 */
// marginRatio: 0.1,
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'middle', 'bottom'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
});
stackedColumnPlot.render();
React Hooks版:
优点:适用性强,hooks开发最爱
缺点:需要一定的改变和封装
注意:此方式需要容器装图表,且容器id与图表配置时一致,如下方的container
import { Column } from '@antv/g2plot';
import React, { useEffect, useState } from "react";
const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4,
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2,
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5,
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7,
},
{
name: 'Berlin',
月份: 'May',
月均降雨量: 52.6,
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5,
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4,
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4,
},
];
const CompareChartsDemo = () => {
useEffect(() => {
const stackedColumnPlot = new Column('container', {
data,
isGroup: true,
xField: '月份',
yField: '月均降雨量',
seriesField: 'name',
/** 设置颜色 */
//color: ['#1ca9e6', '#f88c24'],
/** 设置间距 */
// marginRatio: 0.1,
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'middle', 'bottom'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
});
stackedColumnPlot.render();
}, []);
return <div id="container"></div>
};
export default CompareChartsDemo ;
Ant Design Charts版:
优点:封装成了组件,用法更简单便捷,
缺点:更多属性设置还得看g2plot的api
import React, { useState, useEffect } from 'react';
import { Column } from '@ant-design/charts';
const DemoColumn: React.FC = () => {
var data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4
},
{
name: 'London',
月份: 'May',
月均降雨量: 47
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7
},
{
name: 'Berlin',
月份: 'May',
月均降雨量: 52.6
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4
}
];
var config = {
data: data,
isGroup: true,
xField: '月份',
yField: '月均降雨量',
seriesField: 'name',
label: {
position: 'middle',
layout: [
{ type: 'interval-adjust-position' },
{ type: 'interval-hide-overlap' },
{ type: 'adjust-color' }
]
}
};
return <Column {...config} />;
};
export default DemoColumn;
``
Ant Design Charts官方Api: https://charts.ant.design/demos/column/
AntV g2plot官方: https://g2plot.antv.vision/zh/examples/column/grouped
二、AntV的g2plot的多图层图表
优点:tiptop一组是分开的(不需要这个效果用上面的就行)
缺点:api缺乏,自行琢磨属性
效果图:
数据:
数据源格式可变化,只要你能渲染出来
分组也可动态化(例子中male/female是死数据)
实现代码:
官方版:
import { DataView } from '@antv/data-set';
import { Lab } from '@antv/g2plot';
const yearData = [
['2010', 60, 176, 35, 25],
['2011', 51, 136, 25, 26],
['2012', 73, 196, 35, 38],
['2013', 84, 315, 43, 41],
['2014', 79, 203, 36, 33],
['2015', 89, 286, 41, 48],
];
const labChart = new Lab.MultiView('container', {
height: 500,
padding: 'auto',
tooltip: { showMarkers: false },
views: [
{
data: new DataView()
.source(yearData.map((d) => ({ year: d[0], male: d[3], female: d[4] })))
.transform({ type: 'fold', fields: ['male', 'female'], key: 'gender', value: 'turnout' }).rows,
axes: {
year: {
title: { text: 'Turnout by gender' },
},
},
geometries: [
{
type: 'interval',
xField: 'year',
yField: 'turnout',
colorField: 'gender',
adjust: { type: 'dodge', marginRatio: 0 },
mapping: {},
},
],
},
],
});
labChart.render();
React Hooks版:
import { DataView } from '@antv/data-set';
import { Lab } from '@antv/g2plot';
import React, { useEffect, useState } from "react";
const CompareChartsDemo = () => {
useEffect(() => {
const yearData = [
['2010', 60, 176, 35, 25],
['2011', 51, 136, 25, 26],
['2012', 73, 196, 35, 38],
['2013', 84, 315, 43, 41],
['2014', 79, 203, 36, 33],
['2015', 89, 286, 41, 48],
];
const labChart = new Lab.MultiView('container', {
height: 500,
padding: 'auto',
tooltip: { showMarkers: false },
views: [
{
data: new DataView()
.source(yearData.map((d) => ({ year: d[0], male: d[3], female: d[4] })))
.transform({ type: 'fold', fields: ['male', 'female'], key: 'gender', value: 'turnout' }).rows,
axes: {
year: {
title: { text: 'Turnout by gender' },
},
},
geometries: [
{
type: 'interval',
xField: 'year',
yField: 'turnout',
colorField: 'gender',
adjust: { type: 'dodge', marginRatio: 0 },
mapping: {},
},
],
},
],
});
labChart.render();
}, []);
return <div id="container"></div>
};
export default CompareChartsDemo ;
AntV g2plot多图层图表官方:https://g2plot.antv.vision/zh/examples/case/multi-view#drinks
三、AntV的g2的分组柱状图图例项高亮
效果图:
数据:
const data = [
{ company: 'Apple', type: '整体', value: 30 },
{ company: 'Facebook', type: '整体', value: 35 },
{ company: 'Google', type: '整体', value: 28 },
{ company: 'Apple', type: '非技术岗', value: 40 },
{ company: 'Facebook', type: '非技术岗', value: 65 },
{ company: 'Google', type: '非技术岗', value: 47 },
{ company: 'Apple', type: '技术岗', value: 23 },
{ company: 'Facebook', type: '技术岗', value: 18 },
{ company: 'Google', type: '技术岗', value: 20 },
{ company: 'Apple', type: '技术岗', value: 35 },
{ company: 'Facebook', type: '技术岗', value: 30 },
{ company: 'Google', type: '技术岗', value: 25 }
];
实现代码:
官方版:
import { Chart } from '@antv/g2';
// 默认已经加载 legend-active 交互
const data = [
{ company: 'Apple', type: '整体', value: 30 },
{ company: 'Facebook', type: '整体', value: 35 },
{ company: 'Google', type: '整体', value: 28 },
{ company: 'Apple', type: '非技术岗', value: 40 },
{ company: 'Facebook', type: '非技术岗', value: 65 },
{ company: 'Google', type: '非技术岗', value: 47 },
{ company: 'Apple', type: '技术岗', value: 23 },
{ company: 'Facebook', type: '技术岗', value: 18 },
{ company: 'Google', type: '技术岗', value: 20 },
{ company: 'Apple', type: '技术岗', value: 35 },
{ company: 'Facebook', type: '技术岗', value: 30 },
{ company: 'Google', type: '技术岗', value: 25 }
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.data(data);
chart.scale('value', { nice: true, });
chart.legend({
position: 'top'
});
chart
.interval()
.position('type*value').color('company')
.adjust([{
type: 'dodge',
marginRatio: 0
}]);
chart.render();
React Hooks版:
import { Chart } from '@antv/g2';
import React, { useEffect, useState } from "react";
const CompareChartsDemo = () => {
useEffect(() => {
const data = [
{ company: 'Apple', type: '整体', value: 30 },
{ company: 'Facebook', type: '整体', value: 35 },
{ company: 'Google', type: '整体', value: 28 },
{ company: 'Apple', type: '非技术岗', value: 40 },
{ company: 'Facebook', type: '非技术岗', value: 65 },
{ company: 'Google', type: '非技术岗', value: 47 },
{ company: 'Apple', type: '技术岗', value: 23 },
{ company: 'Facebook', type: '技术岗', value: 18 },
{ company: 'Google', type: '技术岗', value: 20 },
{ company: 'Apple', type: '技术岗', value: 35 },
{ company: 'Facebook', type: '技术岗', value: 30 },
{ company: 'Google', type: '技术岗', value: 25 }
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.data(data);
chart.scale('value', { nice: true, });
chart.legend({
position: 'top'
});
chart
.interval()
.position('type*value').color('company')
.adjust([{
type: 'dodge',
marginRatio: 0
}]);
chart.render();
}, []);
return <div id="container"></div>
};
export default CompareChartsDemo ;
AntV g2图例项官方:https://g2.antv.vision/zh/examples/interaction/component#legend-active