「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不能放到一列
    如下图
    在这里插入图片描述
    这是两列。

  • 尽量不要使用nice 属性,并且设置y轴的 min max值
    由于第一个图表 和第二个图表是共用Y轴,为了保证值的统一,两个图例的单位和起点,终点必须一致。
    否则可能会出现这样的情况,折线的点为64,但点却高于75。
    在这里插入图片描述

  • 第三个坑点就 两个图例的tooltip可能会遮挡,如下图
    在这里插入图片描述

后记

基于最近使用antv g2的体验,稍微谈一下自己的感觉。

  • 相比echarts,配置更加具有简单、易用
  • 相比echarts,文档质量算不得优秀
  • 案例只能说刚刚够用,并不算丰富

相对应的解决办法就是 ,开展一些活动,调动广大开发者的参与积极性,优化,完善文档。
提交更加丰富多彩的案例。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拿我格子衫来

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值