「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
前言
最近研究了一下antv/g2的组合图例，并尝试做了一个不算太难的组合图，下面介绍一下整个图里的实现过程。
最终效果图
先来看一下最终的效果图
该图表有两部分组成，一部分是柱状图，准确说是堆叠的柱状图，一个柱体有多部分组成，没部分占据一定的高度。这样可以看出每部分在整体的大致比例。第二个图表是在堆叠的柱状图上有一个折线图，折线图与柱状图共用X轴，与Y轴。 X轴上每个具体的类目，Y轴是0-100的数值。
实现步骤
在看到需求后，一般人的做法就是寻找最合适的案例，在案例的基础上 稍稍修改。正所谓他山之石，可以攻玉。站在巨人的肩膀。这个时候就体现了一个图表库案例的丰富性。 我是基于该案例做的开发，https://g2plot.antv.antgroup.com/zh/examples/plugin/multi-view/#combo-plot。与我要做的案例很类似。
首先要实现一个多图层图表，就要使用
Mix
这个类。
在该类里，配置多个图表，有一些公用的配置被提取出来啦。如
tooltip
,
legend
,
annotations
。
多图层的配置api 文档 https://g2plot.antv.antgroup.com/api/advanced-plots/mix
在配置参数中， plots是一个很重要的配置参数，它是一个数组，每个元素，都代表一个图表。使用type表明图表的类型，使用options来配置该图表的配置参数。
完整代码
将一些代码复制到 案例的编辑器中，即可看到效果
import { Mix } from '@antv/g2plot';
const data = [
{ xCategory: '识记', type: '5-10%', value: [20, 52] },
{ xCategory: '识记', type: '25-50%', value: [52, 60] },
{ xCategory: '识记', type: '50-75%', value: [60, 62] },
{ xCategory: '识记', type: '75-90%', value: [62, 65] },
{ xCategory: '识记', type: '90-95%', value: [65, 87] },
{ xCategory: '理解', type: '5-10%', value: [30, 52] },
{ xCategory: '理解', type: '25-50%', value: [52, 60] },
{ xCategory: '理解', type: '50-75%', value: [60, 62] },
{ xCategory: '理解', type: '75-90%', value: [62, 65] },
{ xCategory: '理解', type: '90-95%', value: [65, 80] },
{ xCategory: '分析综合', type: '5-10%', value: [10, 52] },
{ xCategory: '分析综合', type: '25-50%', value: [52, 60] },
{ xCategory: '分析综合', type: '50-75%', value: [60, 62] },
{ xCategory: '分析综合', type: '75-90%', value: [62, 65] },
{ xCategory: '分析综合', type: '90-95%', value: [65, 99] },
{ xCategory: '鉴赏评价', type: '5-10%', value: [20, 52] },
{ xCategory: '鉴赏评价', type: '25-50%', value: [52, 60] },
{ xCategory: '鉴赏评价', type: '50-75%', value: [60, 62] },
{ xCategory: '鉴赏评价', type: '75-90%', value: [62, 65] },
{ xCategory: '鉴赏评价', type: '90-95%', value: [65, 95] },
{ xCategory: '表达应用', type: '5-10%', value: [15, 52] },
{ xCategory: '表达应用', type: '25-50%', value: [52, 60] },
{ xCategory: '表达应用', type: '50-75%', value: [60, 62] },
{ xCategory: '表达应用', type: '75-90%', value: [62, 65] },
{ xCategory: '表达应用', type: '90-95%', value: [65, 98] },
const cateMap = {
'5-10%': { color: 'rgb(152,149,225)' },
'25-50%': { color: 'rgb(165,193,225)' },
'50-75%': { color: 'rgb(179,231,247)' },
'75-90%': { color: 'rgb(155,232,220)' },
'90-95%': { color: 'rgb(205,232,155)' },
const plot = new Mix('container', {
appendPadding: 8,
tooltip: { shared: true },
syncViewPadding: true,
legend: {
layout: 'horizontal',
position: 'top',
marker: {
style: {
r: 7,
plots: [
type: 'column',
options: {
data,
xField: 'xCategory',
yField: 'value',
isRange: true,
seriesField: 'type',
yAxis: {
grid: null,
nice: true,
line: {
style: {
stroke: '#aaa',
color: ({ type }) => {
return cateMap[type].color
meta: {
value: {
min: 0,
max: 100,
formatter(val) {
return val + '%'
tooltip: true,
type: 'line',
options: {
data: [
{ date: '识记', ctype: '本校', value: 20 },
{ date: '理解', ctype: '本校', value: 30 },
{ date: '分析综合', ctype: '本校', value: 50 },
{ date: '鉴赏评价', ctype: '本校', value: 80 },
{ date: '表达应用', ctype: '本校', value: 95 },
seriesField: 'ctype',
point: {
size: 5,
shape: 'circle',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 2,
lineStyle: {
lineDash: [5, 5],
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: false,
smooth: true,
color: '#dddddd',
plot.render() 踩的坑
-
第二个图表的
legend与第一个图表的 legend不能放到一列
这是两列。