首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图

「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图

作者头像
拿我格子衫来
发布于 2023-08-24 02:44:05
发布于 2023-08-24 02:44:05
2.1K00
代码可运行
举报
文章被收录于专栏:TopFETopFE
运行总次数:0
代码可运行

前言

作为一名CSDN的前端领域优质创作者,时常有一些读者向我咨询前端问题。最近就有一个读者看了一些我之前写的数据可视化文章,向我请教如何制作一个比较复杂的散点图,由于目前做的是大数据项目,在数据可视化也做过一些成绩,尤其是数据分析,数据血缘链路。最常用的是AntV图表库和Echarts。 于是我就用AntV实现了他的需求,由于这个图表比较复杂,借着这次AntV的案例征文来给大家详细分享一下。

详细需求

先说一下需求背景 某个学校需要统计本区域内学校的成绩,并显示自己在该区域中的位置,设计了这样一个散点图,以x轴为学校成绩的标准差,y轴为学校的平均成绩,两个轴都是数值。点的类型一共有四类。 在图表的四个角分别有辅助注释,分别是

  • 高水平高均衡
  • 高水平低均衡
  • 低水平高均衡
  • 低水平低均衡

除此之外在图表中有两个特殊的点,这两个点附近使用特殊的图标显示。 以达到快速区分,寻找的效果 一个是“本校”, 一个是“全体”,其中"全体"这个点,以该点的(x,y) 画两条蓝色线,两条蓝线将图表划分成了四象限。

总结而言,相对于一般最基础的散点图,该图表有以下难点

  • 四个方位的辅助文本
  • “本校”,“全体”点的特殊图标
  • “全体”点的的两条蓝线

最终效果图

先看一下图表的最终效果

实现步骤

这个图我是使用G2Plot来实现的,官网地址:https://g2plot.antv.antgroup.com/。 它是一个开箱即用的图表库, 并且易于配置、并且定位是一个通用统计图表库。 由于是散点图,所以使用的是G2Plot中Scatter 模块。

基础简单散点图实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Scatter } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/j5ADHaMsZx/scatter.json')
  .then(data => data.json())
  .then(data => {
    const scatterPlot = new Scatter('container', {
      data,
      xField: 'x',
      yField: 'y',
      size: 5,
      pointStyle: {
        fill: '#5B8FF9',
      },
    });
    scatterPlot.render();
  });

使用的数据为

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[
  { "x": 1, "y": 4.181 },
  { "x": 2, "y": 4.665 },
  { "x": 3, "y": 5.296 },
  { "x": 4, "y": 5.365 },
  { "x": 5, "y": 5.448 },
  .....
]

其中有几个比较关键的配置dataxFieldyField

  • data 数组或对象, 设置图表数据源。数据源为对象集合,例如:[{ time: ‘1991’,value: 20 }, { time: ‘1992’,value: 20 }]。
  • xField 一个字符串, 图形在 x 方向对应的数据字段名,一般是横向的坐标轴对应的字段。比如:要看不同班级的人数情况,那么班级字段就是对应的 xField。
  • yField 一个字符串, 图形在 y 方向对应的数据字段名,一般是纵向的坐标轴对应的字段。比如:要看不同班级的人数情况,那么人数字段就是对应的 yField。

四个方位的标注文本

四个方位的图表标注是使用 Annotations 来实现的, 图形标注,Annotation,作为图表的辅助元素,主要用于在图表上标识额外的标记注解。https://g2plot.antv.antgroup.com/api/components/annotations

在一个图表中你可以添加多个图表标注,而且标注的类型也是多种多样的。可以是文字,图片,html,辅助线,弧线。

在该例子中,我们只需要这样配置就可以在四个角添加标注

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
annotations: [
  {
    type: 'text',
    position: ['18%', '5%'],
    content: '高水平高均衡',
    style: {
      textAlign: 'right',
      fontWeight: '500',
      fill: 'rgb(92, 92, 92)',
    },
  },
  {
    type: 'text',
    position: ['18%', '95%'],
    content: '低水平高均衡',
    style: {
      textAlign: 'right',
      fontWeight: '500',
      fill: 'rgb(92, 92, 92)',
    },
  },
  {
    type: 'text',
    position: ['83%', '5%'],
    content: '高水平低均衡',
    style: {
      textAlign: 'left',
      fontWeight: '500',
      fill: 'rgb(92, 92, 92)',
    },
  },
  {
    type: 'text',
    position: ['83%', '95%'],
    content: '低水平低均衡',
    style: {
      textAlign: 'left',
      fontWeight: '500',
      fill: 'rgb(92, 92, 92)',
    },
  },
],

其中position表示标注的位置,可以使用百分比,也可以使用一些特殊位置的枚举值,如position: ['median', 'median'],

某个点的特殊图标及文字

在这个散点图的统计图中,有两个特殊的点,就是“本校”和“全体”

这是为了实现区分,方便自我定位,按照上面这个图,本校的点,更接近“高水平低均衡” 所以说这说明这个学校的成绩基本是高水平,但并不太稳定。比全体水平好一些。

在特殊点这里,使用的是label 配置项。使用label 可以定义某个点的文本图形属性样式。 官方配置文档 https://g2plot.antv.antgroup.com/api/plots/scatter

由于图标上还要显示文字,嫌麻烦的话可以直接将文字放到图片上,我这里是拆开的,在label中加了一个图标,一个文字。 配置如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
label:{
  formatter: item => {
    return labels.includes(item.type) ? item.type : ''
  },
  offsetY: 0,
  content: item => {
    if (labels.includes(item.type)) {
      const group = new G.Group({})
      group.addShape({
        type: 'image',
        attrs: {
          x: 0,
          y: 0,
          width: 40,
          height: 50,
          img: 'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png',
        },
      })

      group.addShape({
        type: 'text',
        attrs: {
          x: 20,
          y: 20,
          text: item.type,
          textAlign: 'center',
          textBaseline: 'top',
          fill: '#ffffff',
        },
      })
      return group
    } else {
      return ''
    }
  },
  labelLine: true,
},

首先过滤一些点,点的属性中有type属性的 才需要显示label。content属性是用来配置label的内容,样式,及定位的。

以某个点为中心划分四象限

这个图表细节要使用散点图的quadrant属性来实现,在散点图中给一个y值和x值就能以该点画出一个四象限,并且能够配置每个区域的颜色,和线的颜色。 quadrant 的配置参数

细分配置

类型

功能描述

xBaseline

number

x 方向上的象限分割基准线,默认为 0

yBaseline

number

y 方向上的象限分割基准线,默认为 0

lineStyle

object

配置象限分割线的样式,详细配置参考绘图属性

regionStyle

object[]

象限样式,详细配置参考绘图属性

labels

object[]

象限文本配置,详细配置参考绘图属性

我们的配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
quadrant: {
  xBaseline: item.standardDeviation,
  yBaseline: item.average,
  lineStyle: {
    stroke: '#1890ff',
    opacity: 0.8,
    lineWidth: 3,
  },
  regionStyle: [
    { fill: '#ffffff', opacity: 0.2 },
    { fill: '#ffffff', opacity: 0.2 },
    { fill: '#ffffff', opacity: 0.2 },
    { fill: '#ffffff', opacity: 0.2 },
  ],
},

item 是"全体"点。配置线的颜色为蓝色 lineStyle.stroke = '#1890ff'

至此该图表所有的细节都已实现。

完整Vue组件代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <template>
  <div>
    <div id="container" style="height: 500px; width: 500px"></div>
  </div>
</template>
<script>
import { Scatter, G2 } from '@antv/g2plot'
const G = G2.getEngine('canvas')
export default {
  data() {
    return {}
  },
  methods: {},
  mounted() {
    const data = [
      { standardDeviation: 8, average: 95, category: 'I类', type: '本校' },
      { standardDeviation: 8, average: 25, category: 'I类' },
      { standardDeviation: 3, average: 26, category: 'I类' },
      { standardDeviation: 0, average: 98, category: 'I类' },
      { standardDeviation: 7, average: 58, category: 'I类' },
      { standardDeviation: 6, average: 7, category: 'I类' },
      { standardDeviation: 10, average: 54, category: 'I类' },
      { standardDeviation: 5, average: 84, category: 'I类' },
      { standardDeviation: 6, average: 21, category: 'I类' },
      { standardDeviation: 9, average: 93, category: 'I类' },
      { standardDeviation: 9, average: 47, category: 'I类' },
      { standardDeviation: 5, average: 26, category: 'I类' },
      { standardDeviation: 10, average: 17, category: 'I类' },
      { standardDeviation: 2, average: 50, category: 'I类' },
      { standardDeviation: 12, average: 3, category: 'I类' },
      { standardDeviation: 10, average: 75, category: 'II类', type: '全体' },
      { standardDeviation: 3, average: 95, category: 'II类' },
      { standardDeviation: 2, average: 75, category: 'II类' },
      { standardDeviation: 10, average: 27, category: 'II类' },
      { standardDeviation: 7, average: 40, category: 'II类' },
      { standardDeviation: 3, average: 81, category: 'II类' },
      { standardDeviation: 2, average: 94, category: 'II类' },
      { standardDeviation: 0, average: 93, category: 'II类' },
      { standardDeviation: 9, average: 68, category: 'II类' },
      { standardDeviation: 10, average: 12, category: 'II类' },
      { standardDeviation: 12, average: 30, category: 'II类' },
      { standardDeviation: 5, average: 10, category: 'II类' },
      { standardDeviation: 4, average: 60, category: 'II类' },
      { standardDeviation: 7, average: 24, category: 'II类' },
      { standardDeviation: 6, average: 28, category: 'II类' },
      { standardDeviation: 11, average: 14, category: 'III类' },
      { standardDeviation: 7, average: 10, category: 'III类' },
      { standardDeviation: 0, average: 13, category: 'III类' },
      { standardDeviation: 4, average: 74, category: 'III类' },
      { standardDeviation: 1, average: 24, category: 'III类' },
      { standardDeviation: 10, average: 4, category: 'III类' },
      { standardDeviation: 11, average: 90, category: 'III类' },
      { standardDeviation: 0, average: 90, category: 'III类' },
      { standardDeviation: 2, average: 99, category: 'III类' },
      { standardDeviation: 11, average: 24, category: 'III类' },
      { standardDeviation: 6, average: 65, category: 'III类' },
      { standardDeviation: 8, average: 0, category: 'III类' },
      { standardDeviation: 5, average: 19, category: 'III类' },
      { standardDeviation: 12, average: 7, category: 'III类' },
      { standardDeviation: 2, average: 69, category: 'III类' },
      { standardDeviation: 12, average: 37, category: 'IV类' },
      { standardDeviation: 8, average: 56, category: 'IV类' },
      { standardDeviation: 5, average: 70, category: 'IV类' },
      { standardDeviation: 5, average: 1, category: 'IV类' },
      { standardDeviation: 0, average: 37, category: 'IV类' },
      { standardDeviation: 4, average: 9, category: 'IV类' },
      { standardDeviation: 11, average: 69, category: 'IV类' },
      { standardDeviation: 7, average: 20, category: 'IV类' },
      { standardDeviation: 9, average: 77, category: 'IV类' },
      { standardDeviation: 1, average: 83, category: 'IV类' },
      { standardDeviation: 5, average: 68, category: 'IV类' },
      { standardDeviation: 3, average: 39, category: 'IV类' },
      { standardDeviation: 1, average: 8, category: 'IV类' },
      { standardDeviation: 10, average: 38, category: 'IV类' },
      { standardDeviation: 11, average: 18, category: 'IV类' },
    ]

    const cateMap = {
      I: { color: '#299999', shape: 'circle' },
      II: { color: '#f6c022', shape: 'triangle' },
      III: { color: '#ff99c3', shape: 'square' },
      IV: { color: '#74cbed', shape: 'diamond' },
    }

    const labels = ['本校', '全体']

    const item = data.filter(x => x.type === '全体')[0]

    const scatterPlot = new Scatter('container', {
      padding: [30, 30, 50, 50],
      data,
      xField: 'standardDeviation',
      yField: 'average',
      colorField: 'category',
      color: ({ category }) => {
        return cateMap[category].color
      },
      size: 5,
      legend: {
        layout: 'horizontal',
        position: 'top',
      },
      shapeField: 'category',
      shape: ({ category }) => {
        return cateMap[category].shape
      },
      pointStyle: {
        fillOpacity: 1,
      },
      label: {
        formatter: item => {
          return labels.includes(item.type) ? item.type : ''
        },
        offsetY: 0,
        content: item => {
          if (labels.includes(item.type)) {
            const group = new G.Group({})
            group.addShape({
              type: 'image',
              attrs: {
                x: 0,
                y: 0,
                width: 40,
                height: 50,
                img: 'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png',
              },
            })

            group.addShape({
              type: 'text',
              attrs: {
                x: 20,
                y: 20,
                text: item.type,
                textAlign: 'center',
                textBaseline: 'top',
                fill: '#ffffff',
              },
            })
            return group
          } else {
            return ''
          }
        },
        labelLine: true,
      },
      annotations: [
        {
          type: 'text',
          position: ['18%', '5%'],
          content: '高水平高均衡',
          style: {
            textAlign: 'right',
            fontWeight: '500',
            fill: 'rgb(92, 92, 92)',
          },
        },
        {
          type: 'text',
          position: ['18%', '95%'],
          content: '低水平高均衡',
          style: {
            textAlign: 'right',
            fontWeight: '500',
            fill: 'rgb(92, 92, 92)',
          },
        },
        {
          type: 'text',
          position: ['83%', '5%'],
          content: '高水平低均衡',
          style: {
            textAlign: 'left',
            fontWeight: '500',
            fill: 'rgb(92, 92, 92)',
          },
        },
        {
          type: 'text',
          position: ['83%', '95%'],
          content: '低水平低均衡',
          style: {
            textAlign: 'left',
            fontWeight: '500',
            fill: 'rgb(92, 92, 92)',
          },
        },
      ],
      meta: {
        average: {
          alias: '平均分',
        },
        standardDeviation: {
          alias: '标准差',
        },
        category: {
          alias: '类别',
        },
      },
      yAxis: {
        nice: true,
        line: {
          style: {
            stroke: '#aaa',
          },
        },
        title: {
          text: '平均分',
          position: 'end',
          offset: 30,
          // autoRotate: false,
        },
      },
      xAxis: {
        title: {
          text: '标准差',
          position: 'end',
        },
        grid: {
          line: {
            style: {
              stroke: '#eee',
            },
          },
        },
        line: {
          style: {
            stroke: '#aaa',
          },
        },
      },
      quadrant: {
        xBaseline: item.standardDeviation,
        yBaseline: item.average,
        lineStyle: {
          stroke: '#1890ff',
          opacity: 0.8,
          lineWidth: 3,
        },
        regionStyle: [
          { fill: '#ffffff', opacity: 0.2 },
          { fill: '#ffffff', opacity: 0.2 },
          { fill: '#ffffff', opacity: 0.2 },
          { fill: '#ffffff', opacity: 0.2 },
        ],
      },
    })
    scatterPlot.render()
  },
}
</script>

附录

代码简洁解释

具体来说,使用了 Scatter 组件创建了一个散点图,并传入了以下配置项:

  • padding:设置图表的内边距。
  • data:传入的数据源。
  • xField:指定 x 轴所对应的数据字段。
  • yField:指定 y 轴所对应的数据字段。
  • colorField:指定颜色所对应的数据字段。
  • color:为传入的数据分类设置颜色,使用了一个函数来返回对应分类的颜色。
  • size:设置散点的大小。
  • legend:设置图例的位置和布局。
  • shapeField:指定形状所对应的数据字段。
  • shape:为传入的数据分类设置形状,使用了一个函数来返回对应分类的形状。
  • pointStyle:设置散点的样式,这里设置了填充不透明度为 1。
  • label:设置散点的标签,使用了一个函数来返回标签的内容和样式。
  • annotations:添加文本注释,用于标识四个象限的位置。
  • meta:设置数据字段的别名。
  • yAxis:设置 y 轴的样式和标题。
  • xAxis:设置 x 轴的样式和标题。
  • quadrant:设置四象限的样式,包括基线坐标、线条样式和区域样式。

最后,调用 render() 方法将散点图渲染到 HTML 元素上。

相关链接

AntV G2Plot 散点图API

AntV G2Plot 散点图四象限示例I

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
最近研究了一下antv/g2的组合图例,并尝试做了一个不算太难的组合图,下面介绍一下整个图里的实现过程。
拿我格子衫来
2023/08/24
1.9K0
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
「AntV」当我用AI为开发AntV图表插上想象的翅膀后
做前端图表时,最耗时的就是找配置参数,比如你在使用AntV G2时,为了更加美观,拉大数据之间的差距,需要将y轴设置一个最小值,由于每个图表的参数少说十几个,多达二十多个,一个一个找,势必会浪费很多时间,更何况有时你找的参数并不在某一具体的图表模块,而是在公共的图表组件配置模块中。这个时候我就思考,这些寻找配置参数,毫无技术性的,耗时的工作能不能交个AI来做?所以在日常的开发图表的过程中,遇到问题,我刻意地去利用AI去完成。下面看一下我在实际开发中的几个案例
拿我格子衫来
2023/08/24
6640
「AntV」当我用AI为开发AntV图表插上想象的翅膀后
「AntV」@antv/g2plot 特殊 散点图 x轴为category 调整了legend 的marker
下面代码演示了如何使用 antv/g2plot 创建一个散点图,并对其进行基本的样式和布局配置。
拿我格子衫来
2023/08/24
5360
「AntV」@antv/g2plot 特殊 散点图 x轴为category 调整了legend 的marker
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面
本项目渊源已久,优雅草2025年发布,PC端已经发布,将在4月完成成品发布,目前由于考虑到鸿蒙端用户使用,毕竟新一代纯血鸿蒙harmonyos next已经不再支持安卓android,因此优雅草团队必须考虑把鸿蒙端也开发上,以下实战过程完整记录了整个开发过程,优雅草卓伊凡审核代码,记录并更新,再次感谢优雅草团队所有同事们的努力,鸿蒙端为了加速鸿蒙生态已经开源地址供查看,关于优雅草星云物联网AI智控系统可以关注优雅草官网,在本文梳理的过程中发现在后面的页面中,只需要直接写出代码并且附上注释,卓伊凡相信大家应该看得懂,针对比较复杂的部分会单独做独立解释,每一个页面都可以对应查看,基本都会截图,如果没有截图的那就是真的没截图
卓伊凡
2025/04/01
1020
72. [HarmonyOS NEXT 实战案例十] 电子书网格布局(下)
在上篇教程中,我们已经实现了电子书网格布局的基本功能。本篇教程将在此基础上,进一步优化布局、添加交互功能以及实现更多高级特性,使电子书应用更加完善和用户友好。
全栈若城
2025/06/08
920
【数据可视化】Echarts官方文档及常用组件
前面介绍了柱状图、折线图、饼图3种最为常见图表的绘制和使用:【数据可视化】Echarts最常用图表,但是没有介绍在遇到问题时如何寻求帮助,也没有详细介绍图表中组件的使用。这次来介绍ECharts中官方文档、常用组件的使用方法,可以更加快捷地创建清晰明了、实用的图表。 以下代码均在VScode中使用。
zxctscl
2024/03/21
3.3K0
【数据可视化】Echarts官方文档及常用组件
Echarts5.3.2可视化案例-应用篇
参考: https://github.com/sutianbinde/charts https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/chengduxiaoc/p/7664397.html 效果:
IT从业者张某某
2022/11/12
2.1K0
Echarts5.3.2可视化案例-应用篇
Flex常用组件
本章主要介绍如何使用Flex组件构建界面。Flex组件可分为可见组件和非可见组件。可见组件用于界面的外观设计,非可见组件为辅助应用程序的设计。例如,使用Flex非可见组件来存储数据,为一些多值可见组件提供数据源,如下拉框组件。另外,本章还着重介绍了Flex中最常用的几种组件, 包括复选框(CheckBox)、 下拉框(ComboBox)、列表框(List)、单选框(RadioButton)、输入框(Textln- put)、消息提示框(Alert)、AdvancedDataGrid数据表格组件、Tree组件、MenuBar 菜单导航组件、VideoPlayer视频播放组件等。
张哥编程
2024/12/19
3860
Echarts数据可视化全解注释
github地址:https://github.com/626626cdllp/echarts
全栈程序员站长
2022/09/09
11.7K0
ECharts常用配置项
ECharts是我们常用的图表控件,功能特别强大,每次使用都要查API比较繁琐,这里就记录开发中常用的配置。
码客说
2021/12/31
4.1K0
ECharts常用配置项
【数据可视化】Echarts中的其它图表
上次提到了【数据可视化】Echarts最常用图表,其中还有一些图需要了解,这次来分享一下。
zxctscl
2024/03/21
4970
【数据可视化】Echarts中的其它图表
Python 动态图表 pyecharts 使用
Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python 是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts 诞生了。
为为为什么
2023/03/16
7K0
Python 动态图表 pyecharts 使用
统计学学术速递[7.20]
【1】 Heavy-tailed phase-type distributions: A unified approach 标题:重尾相型分布:一种统一的方法
公众号-arXiv每日学术速递
2021/07/27
1K0
Python 数据分析与可视化:开启数据洞察之旅(5/10)
在当今数字化时代,数据就像一座蕴藏无限价值的宝藏,等待着我们去挖掘和探索。而 Python,作为数据科学领域的明星语言,凭借其丰富的库和强大的功能,成为了开启这座宝藏的关键钥匙,在数据分析和可视化领域占据着举足轻重的地位。
正在走向自律
2025/05/10
7900
Python 数据分析与可视化:开启数据洞察之旅(5/10)
c# 自定义多选下拉列表2
以下为工作中遇到的,备注一下 先需要几个辅助类 1 #region GripBounds 2 3 using System.Drawing; 4 internal struct GripBounds 5 { 6 private const int GripSize = 6; 7 private const int CornerGripSize = GripSize << 1; 8 9 public GripBounds(Rectangle cl
冰封一夏
2019/09/11
3K0
统计学学术速递[7.27]
【1】 Inference for Heteroskedastic PCA with Missing Data 标题:具有缺失数据的异方差主元分析的推断
公众号-arXiv每日学术速递
2021/07/28
9330
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
自定义背景,做这个功能的原因是因为一些人觉得必应的每日一图并不好看,想要手动上传自己手机里的壁纸作为背景,并且应用也要有自带的壁纸供用户选择。正所谓有需就有求,这是亘古不变的道理,第三个就是UI的优化,这次我是打算把切换城市的弹窗挪到二级菜单里面,右上角做一个一级菜单列表,这个列表暂定功能为切换城市和切换背景,这样做也是符合大众APP的审美,比如微信、支付宝、QQ之类的。
晨曦_LLW
2020/09/25
1.8K0
统计学学术速递[6.30]
【1】 On the Optimal Configuration of a Square Array Group Testing Algorithm 标题:关于方阵分组测试算法的最优配置
公众号-arXiv每日学术速递
2021/07/02
1.3K0
大数据工程师必备之数据可视化技术
也有其他类的软件做可视化:一则使用,一则是开发。使用有成品的软件可以使用,一些SPSS软件、Tableau。开发使用的是echarts、Hights、D3等一些可视化的工具和库。
张哥编程
2024/12/13
7330
大数据工程师必备之数据可视化技术
统计学学术速递[7.22]
【1】 Inner spike and slab Bayesian nonparametric models 标题:内尖峰和板条贝叶斯非参数模型
公众号-arXiv每日学术速递
2021/07/27
8760
推荐阅读
相关推荐
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档