Antv/G2 折线图 DataSet 数据展开成指定格式
DataSet 文档
G2 3.2 DataSet 文档
Demo:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>双折线图</title>
</head>
<body><div id="chartcontainer"></div><script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight</script><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script><script>// 在一行中保存多个城市的数据,需要将数据转换成// {month: 'Jan', city: 'Tokyo', temperature: 3.9}var data = [{month: 'Jan', Tokyo: 7.0, London: 3.9, trate: 0.23, lrate: 0.12}, {month: 'Feb', Tokyo: 6.9, London: 4.2, trate: 0.53, lrate: 0.32},{month: 'Mar', Tokyo: 9.5, London: 5.7, trate: 0.63, lrate: 0.52}, {month: 'Apr', Tokyo: 14.5, London: 8.5, trate: 0.23, lrate: 0.22}, {month: 'May',Tokyo: 18.4, London: 11.9, trate: 0.13, lrate: 0.62}, {month: 'Jun', Tokyo: 21.5, London: 15.2, trate: 0.03, lrate: 0.12},{month: 'Jul', Tokyo: 25.2,London: 17.0, trate: 0.93, lrate: 0.02},{month: 'Aug', Tokyo: 26.5, London: 16.6, trate: 0.23, lrate: 0.82}, {month: 'Sep', Tokyo: 23.3, London: 14.2, trate: 0.43, lrate: 0.92}, {month: 'Oct', Tokyo: 18.3, London: 10.3, trate: 0.63, lrate: 0.32},{month: 'Nov', Tokyo: 13.9, London: 6.6, trate: 0.73, lrate: 0.22}, {month: 'Dec', Tokyo: 9.6, London: 4.8, trate: 0.53, lrate: 0.52}];var ds = new DataSet(); // 创建DataSet 对象var dv = ds.createView().source(data);// 创建数据实例// fold 方式完成了行列转换,如果不想使用 DataSet 直接手工转换数据即可dv.transform({type: 'fold',fields: ['Tokyo', 'London'], // 展开字段集key: 'city', // key字段value: 'temperature' // value字段});console.log('dv',dv)var chart = new G2.Chart({container: 'chartcontainer',forceFit: true,height: 500});chart.source(dv, {month: {range: [0, 1]}});chart.tooltip({crosshairs: {type: 'line'}});chart.axis('temperature', {label: {formatter: function formatter(val) { // 格式化return val + '°C';}}});// 自定义图例chart.legend('city',{clickable: true,position: 'top', // 设置图例的显示位置 })chart.line().position('month*temperature').color('city').shape('smooth');chart.point().position('month*temperature').color('city').size(4).shape('circle').style({stroke: '#fff',lineWidth: 1});chart.render();</script>
</body>
</html>
数据处理完如下:
图表页面效果:
相关文章:

Antv/G2 折线图 DataSet 数据展开成指定格式
DataSet 文档 G2 3.2 DataSet 文档 Demo: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><m…...
物理问题中常见的分析问题----什么样的函数性质较好
物理问题中常见的积分符号位置交换问题 重极限与累次极限 高数下的定义 累次极限:求极限时需要遵循一定的顺序重极限:任意方向趋于的极限 两者之间的关系: 两者没啥关系存在累次极限存在而不相等的函数...... 求和符号与积分符号互换--逐项积…...
8 Go的函数
概述 在上一节的内容中,我们介绍了Go的指针,包括:使用指针、空指针、指针数组、指向指针的指针等。在本节中,我们将介绍Go的函数。函数允许开发者将相关的代码组织在一起,并将其命名,以便在其他地方进行调用…...

算法笔记-第九章-二叉树的遍历(待整理)
算法笔记-第九章-二叉树的遍历 二叉树的先序遍历二叉树的中序遍历二叉树的先序遍历 //二叉树的先序遍历 #include <cstdio> #include <vector> using namespace std;const int MAXN = 50;struct Node //用结构体表示左子树和右子树的数据 {int l, r; } nodes[MAXN]…...

C语言从入门到精通之【字符串】
C语言没有专门用于储存字符串的变量类型,字符串都被储存在char类型的数组中。数组由连续的存储单元组成,字符串中的字符被储存在相邻的存储单元中,每个单元储存一个字符,每个字符占1个字节。 数组末尾位置的字符\0。这是空字符&am…...

超详细!必看!!STM32--时钟树原理
一、什么是时钟? 时钟是单片机的脉搏,是系统工作的同步节拍。单片机上至CPU,下至总线外设,它们工作时序的配合,都需要一个同步的时钟信号来统一指挥。时钟信号是周期性的脉冲信号。 二、什么是时钟树? S…...
用 Golang 采集 Nginx 接口流量大小
简介 在开发和运维中,我们经常需要监控和分析服务器的接口流量大小,特别是对于部署了 Nginx 的服务器。本文将介绍如何使用 Golang 采集 Nginx 接口流量大小,并展示如何将这些数据进行实时监控和分析。 步骤一:准备工作 在开始…...
Linux java jar启停脚本(合并版)
#包文件路径及名称(目录按照各自配置) APP_NAME=/opt/whkc/gs/app-java.jar#查询进程,并杀掉当前jar/java程序 pid=`ps -ef|grep app-java.jar | grep -v grep | awk {print $2}` kill...

计算机毕业设计选题推荐-公共浴池微信小程序/安卓APP-项目实战
✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

sqli-labs关卡13(基于post提交的单引号加括号的报错盲注)通关思路
文章目录 前言一、回顾第十二关知识点二、靶场第十三关通关思路1、判断注入点2、爆显位3、爆数据库名4、爆数据库表5、爆数据库列6、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识,禁止用于做非法攻击。注意靶场是可以练习的平台,…...

SparkAi创作系统ChatGPT网站源码+详细搭建部署教程+AI绘画系统+支持GPT4.0+Midjourney绘画
一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…...
shiro默认session设置永不超时
Shiro默认情况下session是有超时时间的,而不是永不超时。默认的超时时间是30分钟,可以通过修改Shiro的配置文件来更改超时时间。如果想要让session永不超时,可以将超时时间设置为一个很大的值,例如Integer.MAX_VALUE。 以下是修改…...
前端食堂技术周刊第 104 期:Angular v17、GPTs、Vue vapor mode、Svelte Flow、Bundler 的设计取舍
美味值:🌟🌟🌟🌟🌟 口味:金奖乳鸽 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下…...

list复制出新的list后修改元素,也更改了旧的list?
例子 addAll() Testpublic void CopyListTest(){Student student Student.builder().id(1).name("张三").age(23).classId(1).build();Student student2 Student.builder().id(2).name("李四").age(22).classId(1).build();List<Student> student…...
Qt绘制各种图形
重载绘图事件: protected:void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;void Widget::paintEvent(QPaintEvent *event) { 进行绘图操作 } 绘图前操作: //基本绘图QPainter painter(this);//创建QPainter对象painter.setRenderHint(QPa…...

NIO 笔记(二)Netty框架专题
【笔记来自:it白马】 Netty框架 前面我们学习了Java为我们提供的NIO框架,提供使用NIO提供的三大组件,我们就可以编写更加高性能的客户端/服务端网络程序了,甚至还可以自行规定一种通信协议进行通信。 NIO框架存在的问题 但是之…...

HTTP——
HTTP 请求报文的构成 如下图: 第一行:HTTP请求的方法,具体是POST方法还是GET方法,或是其它方法;URI就是你的HTTP请求的路径;后面是HTTP协议的版本; 第二行往下连续多行:这些是请求头部分,也就是请求的首部设置的一些信息,相当于对HTTP请求的一些设置; 空格行:在…...
第13章 Java IO流处理(二) 字节流与字符流
目录 内容说明 章节内容 1、I/O与流 2、输入流和输出流 3、字节流与字符流...

【论文阅读】(CTGAN)Modeling Tabular data using Conditional GAN
论文地址:[1907.00503] Modeling Tabular data using Conditional GAN (arxiv.org) 摘要 对表格数据中行的概率分布进行建模并生成真实的合成数据是一项非常重要的任务,有着许多挑战。本文设计了CTGAN,使用条件生成器解决挑战。为了帮助进行公…...

如何进行iOS技术博客的备案?
如何进行iOS技术博客的备案? 标题:iOS技术博客备案流程及要求解析 摘要: 在本篇问答中,我们将为iOS技术博主介绍如何进行备案。如果你的iOS应用只包含简单的页面,并通过蓝牙进行数据采集和传输,那么你…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...

云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...