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应用只包含简单的页面，并通过蓝牙进行数据采集和传输，那么你…...
如何删除论文脚注横线的方法——视图-草稿-引用——显示备注——删除脚注分隔符-即可。
如何删除论文脚注横线的方法——视图-草稿-引用——显示备注——删除脚注分隔符-即可。 Word中脚注线不会删？这里有妙招！,教育,职业教育,好看视频...
ParaView时间戳设置全攻略：从基础标注到自定义格式（5.8.0实测）
ParaView时间戳设置全攻略：从基础标注到自定义格式（5.8.0实测） 在科学可视化领域，时间戳不仅是数据演变的见证者，更是研究成果呈现的专业语言。ParaView作为开源可视化工具链的标杆，其时间标注功能在学术论…...
Hirschmann RS20-0800M4M4SDAE工业以太网交换机
Hirschmann RS20-0800M4M4SDAE 工业以太网交换机产品特点：端口配置：共8个端口，含6个RJ45电口和2个ST光纤接口。端口速率：所有端口均为100Mbps快速以太网。光纤类型：2个光纤端口为多模、ST接头。管理类型：二…...
PlayAI语音合成质量到底如何？12款竞品横向对比+5项MOS/LSD/STOI硬指标揭榜
更多请点击： https://kaifayun.com 第一章：PlayAI语音合成质量评测报告 PlayAI 是一款面向开发者与内容创作者的实时语音合成（TTS）服务，支持多语种、多音色及情感可控输出。本报告基于客观可复现的评测流程࿰…...
Scroll Reverser：让Mac的多设备滚动体验回归直觉的免费神器
Scroll Reverser：让Mac的多设备滚动体验回归直觉的免费神器 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 你是否曾经在MacBook的触控板和鼠标之间切换时࿰…...
PentestGPT实战部署指南：AI驱动的渗透测试工作流落地
1. 这不是另一个“AI安全”的概念玩具，而是一套能真正跑起来的渗透测试辅助工作流“PentestGPT”这个名字刚在GitHub上出现时，我第一反应是点开又关掉——过去三年里，我见过太多打着“AI渗透”旗号的项目：有的只是把ChatGPT API封…...
半导体元件（二极管/三极管/MOS管/IC）损坏诊断全解
半导体元件（二极管、三极管、MOS 管、集成电路）是 PCB 的核心功能单元，对过压、过流、ESD、高温极度敏感，损坏后直接导致电路功能失效、短路烧板。很多工程师维修时盲目更换芯片，不仅成本高，还易误判。一…...
股票买卖最佳时机：LeetCode121题解
题目LeetCode121给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。你只能选择 某一天 买入这只股票，并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。返回你可以从这笔交易中获取…...
开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？
开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？ 关键词 AI Agent Harness Engineering、大语言模型编排（LLM Orchestration）、LangChain、AutoGPT、CrewAI、工具调用（Tool Calling）、多Agent协作、自主任务规划 摘要 随着大语言模型…...
phpMyAdmin CVE-2018-12613：从文件读取到RCE的伪协议利用链
1. 这个漏洞不是“能读文件”那么简单，而是后台权限的彻底失守phpMyAdmin 4.8.1里那个CVE-2018-12613，很多人扫到就报个“存在文件包含”，顺手贴个?targetphp://filter/convert.base64-encode/resource/etc/passwd截图完事。我去年在给一家教…...