Antv | 蚂蚁数据可视化API应用

HTML5 图表API应用学习

- 1. 浏览器中使用方法
- 2. 项目中使用方法

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
应用图表可以让我们在前端开发中页面更加丰富多彩，可以帮助我们更加直观地展现数据，是前端工程师的必备技能之一。

1. 浏览器中使用方法

安装
既可以通过将脚本下载到本地也可以直接引入在线资源。

<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
1
2

<!-- 下载到本地 引入本地脚本 -->
<script src="./g2plot.min.js"></script>
<script>
  // 获取到图表的构造函数
  //方法1：
  const {
    Line } = G2Plot;
  //方法2：
  var Line = G2Plot.Line
</script>
1
2
3
4
5
6
7
8
9
10

通过npm 安装
打开网页所在的终端

// 推荐用法
npm install @antv/g2plot --save
1
2

成功安装完成之后，即可使用 import进行引用：

import {
    Line } from '@antv/g2plot';
1
2

创建一个图表容器

<div id="container"></div>
1

提供图表数据

const data = [
      {
    year: '1991', value: 3 },
      {
    year: '1992', value: 4 },
      {
    year: '1993', value: 3.5 },
      {
    year: '1994', value: 5 },
      {
    year: '1995', value: 4.9 },
      {
    year: '1996', value: 6 },
      {
    year: '1997', value: 7 },
      {
    year: '1998', value: 9 },
      {
    year: '1999', value: 13 },
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

创建图表实例通过图表构造函数

const line = new Line('container',{
   
      data,
      xField:'year',
      yField:'value',
      color:"#000000",
      xAxis:{
   
        top:true
      }
      // 设置多色
      // color: ['#d62728', '#2ca02c', '#000000'],
    })
    line.render();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

页面效果：
在这里插入图片描述

浏览器使用案例完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8"1
2
3
4

相关阅读:
verdi仿真过程中特定时间段的波形的dump
2023年软考什么时候报名，报名有什么条件？
饥荒服务器阿里云租用价格表一年和一个月收费报价表
【数据结构-oj】顺序表和链表的 oj 题（入门）
[附源码]java毕业设计校园摄影爱好者交流网站
UTF-8、Unicode编码与汉字的相关内容
SpringCloud-7-Spring Boot使用Jetty容器
海智算法训练营第三十一天 | 第八章贪心算法 part02 | ● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II
HTTP 到底是干啥的？（万字解析）
C++基础入门详解（一）

原文地址：https://blog.csdn.net/weixin_53027472/article/details/126752326