使用G2Plot制作图表

已于 2023-11-24 20:40:42 修改
阅读量367 收藏 1
点赞数 4
文章标签： 前端 javascript 链表
于 2023-11-24 20:40:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55269913/article/details/134606263
版权

 首先打开官网G2Plot 开箱即用的图表库 | AntV (antgroup.com)

然后点击开始使用 >点击快速使用>

引入在线资源

<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>

创建一个图表容器

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

引入数据。G2Plot 的数据源格式是 JSON 数组，数组的每个元素是一个标准 JSON 对象，部分图表除外。

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 },
];

创建并渲染图表

const line = new Line('container', {
  data,
  xField: 'year',
  yField: 'value',
});

line.render();

注意：使用哪种图表，就要将那种图表引入

const { Line } = G2Plot;

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
     
</head>
<body>
    <div id="container"></div>
    <script>
        const { Line } = G2Plot;
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 },
];
const line = new Line('container', {
  data,
  xField: 'year',
  yField: 'value',
});

line.render();
    </script>
</body>
</html>

桃汁11
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
g2plot-react：用于React的G2Plot
02-05
@ opd / g2plot-react 用于React的 安装 npm install @opd/g2plot-react 用法 import React , { useRef } from 'react' import { LineChart , LineChartProps } from '@opd/g2plot-react' const config : LineChartProps = { height : 350 , autoFit : true , xField : 'year' , yField : 'value' , smooth : true ,
G2Plot Tooltip 自定义头部、尾部、辅助线
卡尔特斯
01-04 2184
<template> <!-- 图表 --> <div id="Line1"></div> </template> <script> // 导入 import { Line } from '@antv/g2plot' export default { mounted () { // 数据源 const dataSource = [ { title: '1998年5月', .
AntvG2Plot的一些基础用法
xiaowu1127的博客
03-21 1638
AntvG2Plot的一些基础用法
antv图例出现分页_G2Plot: 你绝对想不到柱形图背后有这么多故事
weixin_39595085的博客
12-20 795
G2Plot是 AntV 团队打造的开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库，本文介绍 G2Plot 在打造柱形图背后的各种故事。背景柱形图——人们最常使用的图表之一，是一种使用矩形条，对不同类别进行数值比较的统计图表。最基础的柱形图，需要一个分类变量和一个数值变量，在柱状图上，分类变量的每个实体都表示为一个矩形(通俗讲即为“柱子”)，而数值则决定了柱子的高度。作为最常使用的...
Antv G2折线图+柱状图 自定义图例(legend)和tooltip
热门推荐
aminwangaa的博客
07-24 1万+
import React, { useState, useEffect, useRef} from "react"; import "./chart.less" import { Chart } from "@antv/g2"; const Charts = () => { const chartRef = useRef() const data = [ { name: "杭州银行", score: 2, num: 5, city: "bj" }, .
ggplot2手册
10-12
ggplot2基于Leland Wilkinson在Grammar of Graphics（图形的语法）中提出的理论，取首字母缩写再加上plot，于是得名ggplot。按照《图形的语法》一书中的观点，一张统计图形就是从数据到点、线或方块等几何对象的颜色、形状或大小等图形属性的一个映射，其中还可能包含对数据进行统计变换（如求均值或方差），最后将这个映射绘制在一定的坐标系中就得到了我们需要的图形。图中可能还有分面，就是生成关于数据的不同子集的图形。
AntV | G2Plot
lilygg的博客
11-06 5650
g2plot简介 g2plot是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。 官方文档：https://antv-g2plot.gitee.io/zh/docs/manual/introduction 参考链接：https://blog.csdn.net/weixin_42628594/article/details/108658435 .
AntV | 蚂蚁数据可视化 G2Plot 快速入门
weixin_46703850的博客
11-12 1万+
AntV | 蚂蚁数据可视化 G2Plot 快速入门 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
知无涯
05-24 4057
使用散点图分析学生成绩的稳定性，平均分，标准差，四象限。数据标注，g2plot 图表。
Antv | G2-Plot图表在vue项目中的使用
qq_52403971的博客
09-23 4450
什么是G2-Plot G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。（详情可查看g2官网。） G2图表 、 Echarts图表都是我们在vue项目中视图化很好表现的形式，因此利用好图表对视图和模型数据进行连接，能够很好的进行数据分析和数据表达。 G2的特性： ???? 开箱即用、默认好用的高质量统计图表 ???? 提炼自企业级产品的
基于Vue+ElementUI+G2Plot+Echarts的大屏设计器，使用简单，完全免费，代码开源
08-11
DataRoom是一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏目录管理、大屏设计、大屏预览能力，支持MySQL、Oracle、PostgreSQL、JSON、HTTP、Groovy等数据集接入，使用...
基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器
01-06
DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏设计、预览能力，支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy...
PyG2Plot::artist_palette:用于@ AntVG2Plot绘图库的Python3绑定
03-07
:artist_palette: Python3绑定，它是一个交互式的响应式图表库。 根据图形语法，您可以通过几行代码轻松制作出出色的统计图。 PyG2Plot受到PyG2Plot的启发。 文档：··· 安装 $ pip install pyg2plot 用法 呈现...
ant-design-charts：绘图属性和通用配置
读心悦
05-05 2302
ant-design-charts是以G2Plot作为绘图引擎，来实现react可视化图表库，如果项目中以ant-design作为UI框架，那么使用ant-design-charts来实现数据可视化，是最合适不过了。绘图属性，指的是图表的样式配置，比如折线图的lineStyle，柱状图的columnStyle，也有一些图表组件样式配置属性，比如label的样式。在修改图表属性的时候，其实就是设置G2Plot的属性。
G2Plot怎么配置数据源来更新数据
weixin_42593130的博客
01-15 300
G2Plot 支持多种数据源，包括 JSON 数组、CSV 文件、远程 API 等。要配置数据源，可以在初始化图表时传入 data 属性，如： const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, ... ]; const chart = new G2Plot.Line(container, { ...
React+G2 + G2plot 踩坑
ujjhuhu的博客
02-18 4021
这里写自定义目录标题参与图表组件库开发（要求使用Echarts或G2）坑1： 参与图表组件库开发（要求使用Echarts或G2） 因为这两个都没用过，翻阅多篇文章，最终选择入坑G2，要用就用新技术！所以特此记录，方便以后避坑。 示例图（颜色随数据改变）： 坑1： ............
antv/g2中的柱状图一些配置
yuangan1994的博客
09-29 1万+
g2图表有些api的属性不全，文档看着有些费劲，所以整理了一些项目中用到的柱状图的简单配置项 图标初始化 const chart = new Chart({ container: this.rootRef.current, //图标容器使用react的createRef()指定 autoFit: true, //图标的宽度自适应 height: isYesNoLabel ? 500 : chartH, }); chart.data(da
antv g2plot可视化图表在vue中的使用之三：图表皮肤主题theme配置
砥砺前行的博客
09-22 4102
文章目录参考资料 参考资料 https://www.yuque.com/antv/g2-docs/tutorial-theme 语雀AntV/G2 文档 https://zhuanlan.zhihu.com/p/60812943 知乎antv 修改主题 背景色 https://github.com/antvis/G2Plot/issues/1226
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 167
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
g2plot 图表点击事件
10-28
g2plot是一个基于G2封装的图表库，它提供了丰富的图表类型和交互功能。在g2plot中，可以通过onReady属性来绑定图表渲染完成后的回调函数，从而实现图表的点击事件。具体来说，可以在回调函数中获取到chart对象plot，并通过plot.on方法来绑定相关事件，例如element:click事件。当用户点击图表元素时，就会触发该事件，并可以通过回调函数中的参数来获取到相关数据。在React中，可以使用@opd/g2plot-react来方便地使用g2plot库。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值