Antv/G2 分组柱状图+折线图双轴图表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height"><title>分组柱状图+折线图双轴图表</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}#chartcontainer {margin: 50px auto;text-align: center;}
</style>
</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/lib/antv/g2/4.2.8/dist/g2.min.js"></script><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script><script><!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->const data = [{date: '2023/8/1', type: 'london', value: 4623, rate: 0.33}, {date: '2023/8/1', type: 'tokyo', value: 2208, rate: 0.53}, {date: '2023/8/1', type: 'paris', value: 182, rate: 0.63}, {date: '2023/8/2', type: 'london', value: 6145, rate: 0.13}, {date: '2023/8/2', type: 'tokyo', value: 2016, rate: 0.33}, {date: '2023/8/2', type: 'paris', value: 257, rate: 0.33}, {date: '2023/8/3', type: 'london', value: 508, rate: 0.23},{date: '2023/8/3', type: 'tokyo', value: 2916, rate: 0.03},{date: '2023/8/3', type: 'paris', value: 289, rate: 0.73},{date: '2023/8/4', type: 'london', value: 6268, rate: 0.63}, {date: '2023/8/4', type: 'tokyo', value: 4512, rate: 0.63}, {date: '2023/8/4', type: 'paris', value: 428, rate: 0.53}, {date: '2023/8/5', type: 'london', value: 6411, rate: 0.33}, {date: '2023/8/5', type: 'tokyo', value: 8281, rate: 0.03}, {date: '2023/8/5', type: 'paris', value: 619, rate: 0.13},{date: '2023/8/6', type: 'london', value: 1890, rate: 0.43}, {date: '2023/8/6', type: 'tokyo', value: 2008, rate: 0.53}, {date: '2023/8/6', type: 'paris', value: 87, rate: 0.73},{date: '2023/8/7', type: 'london', value: 4251, rate: 0.03}, {date: '2023/8/7', type: 'tokyo', value: 1963, rate: 0.13}, {date: '2023/8/7', type: 'paris', value: 706, rate: 0.83}]var chart = new G2.Chart({container: 'chartcontainer',autoFit: true,width: 300,height: 300,padding: [80, 80, 50, 80]});chart.data(data);chart.scale({ value: {formatter: (val) => {return val + '万'},sync: true, nice: true,}, rate: {formatter: (rate) => {return rate + '%'},sync: true, nice: true,} });chart.legend('type',{position: 'top' // 设置图例的显示位置 })chart.axis('rate', {grid: null,label: {textStyle: {fill: '#6495ED'}}});chart.interval().position('date*value').color('type').adjust([{type: 'dodge',marginRatio: 1 / 32}])chart.line().position('date*rate').color('type').size(3).shape('smooth');chart.point().position('date*rate').color('type').size(3).shape('circle');chart.render();</script>
</body>
</html>
页面效果：
相关文章：
Antv/G2 分组柱状图+折线图双轴图表
<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,heightdevice-height"><title>分组柱状图折线图双轴图表</title><styl…...
springboot323基于Java的美妆购物网站的设计与实现
交流学习： 更多项目： 全网最全的Java成品项目列表 https://docs.qq.com/doc/DUXdsVlhIdVlsemdX 演示 项目功能演示： ————————————————...
vue项目本地开发完成后部署到服务器后报404
vue项目本地开发完成后部署到服务器后报404是什么原因呢？ 一、如何部署 前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后，是生成一系…...
Android设计模式--状态模式
真知即所以为行，不行不足谓之知 一，定义 当一个对象的内在状态改变时，允许改变其行为，这个对象看起来像是改变了其类。 这么说可能很难理解，通俗来讲就是当一个对象它有多种状态的时候，把每一种状态的行为…...
C++关系运算符重载
#include<iostream> using namespace std;class Person { public:string name;int age;Person(string n, int a){name n;age a;}//friend bool operator(Person& p1, Person& p2); 使用友元//成员函数实现函数关系符重载bool operator(Person& p) {if (na…...
HLS基础issue
hls 是一个用C/c 来开发PL ，产生rtl的工具 hls是按照rtl code来运行的 ， 但是rtl会在不同器件调用不同的源语； 可能产生的ip使用在vivado另外一个器件的话 会存在问题； Hls ： vivado ip ， vitis kernel 是…...
C#特性（Attribute）
C#特性（Attribute）是一种在程序中添加元数据的机制，它可以为代码提供额外的信息和指示。通过使用特性，我们可以为类、方法、属性等元素添加标记，以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…...
【设计模式】七大设计原则
七大设计原则 文章目录 七大设计原则一、概述二、单一职责原则三、接口隔离原则四、依赖倒转原则五、里氏替换原则六、开闭原则七、迪米特法则八、合成复用原则 一、概述 设计模式是为了让程序(软件)，具有更好代码重用性，可读性，可扩展性&am…...
思维导图软件 Xmind mac中文版特点介绍
XMind 2022 mac是一款思维导图软件，可以帮助用户创建各种类型的思维导图和概念图。 XMind mac软件特点 - 多样化的导图类型：XMind提供了多种类型的导图，如鱼骨图、树形图、机构图等，可以满足不同用户的需求。 - 强大的功能和工具&…...
Day32力扣打卡
打卡记录 买卖股票的最佳时机 IV（状态机DP） 链接 class Solution:def maxProfit(self, k: int, prices: List[int]) -> int:n len(prices)max lambda x, y: x if x > y else yf [[-0x3f3f3f3f] * 2 for _ in range(k 2)]for i in range(k 2…...
抗击.Elbie勒索病毒：如何应对.Elbie病毒威胁，保卫您的数据
导言： .Elbie勒索病毒如今成为网络世界中的一大威胁，其狡猾性让用户防不胜防。本文将深入介绍.Elbie病毒的特点、对数据的威胁，提供被感染文件的恢复方法，并详述一系列强化网络安全的预防措施，让您远离.Elbie勒索病毒…...
Vue3 函数式弹窗
运行环境 vue3vitetselement-plus 开发与测试 1. 使用h、render函数创建Dialog 建议可在plugins目录下创建dialog文件夹，创建index.ts文件，代码如下 import { h, render } from "vue";/*** 函数式弹窗* param component 组件* param opti…...
如何解决 Critical dependency: the request of a dependency is an expression ？
更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码： ruoyi-nbcio: nbcio-boot的若依版本,基于ruoyi-flowable-plus和flowable6.7.2，目前处于开发功能完善阶段，目标是打造一个最好的若依平台上flowable流程管理系统开源版本&…...
挑战视觉边界，探索图形验证码背后的黑科技
在日常生活中，我们登录网站或者其他平台时，在填写完账号密码之后，还会让我们填写4或6位的数字或者英文字母等，填写正确才能请求登录。这个其实是防止某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，如下…...
【网络奇缘】- 计算机网络|网络类型|性能指标
🌈个人主页: Aileen_0v0🔥系列专栏: 一见倾心,再见倾城 --- 计算机网络~💫个人格言:"没有罗马,那就自己创造罗马~" 目录 计算机网络分类 1.根据范围分类 编辑 2.按使用者分编辑 3.按交换技术分 编辑4.按拓扑结构分 …...
Leetcode—剑指Offer LCR 140.训练计划II【简单】
2023每日刷题（三十三） Leetcode—LCR 140.训练计划II 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* trainingPlan(struct ListNode* head, int cnt) {str…...
梦想编织者——Adobe Dreamweaver
今天，我们来谈谈一款在Adobe系列中推出的一款Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，是集网页制作和管理网站于一身的所见即所得网页代码编辑器。 利用对 HTML、CSS、JavaScript等内容的支持，设计人员…...
springMVC学习笔记-请求映射，参数绑定，响应，restful，响应状态码，springMVC拦截器
目录 概述 springMVC做了什么 springMVC与struts2区别 springMVC整个流程是一个单向闭环 springMVC具体的处理流程 springMVC的组成部分 请求映射 RequestMapping 用法 属性 1.value 2.method GET方式和POST方式 概述 HTTP给GET和POST做了哪些规定 GET方式&…...
Python实现视频字幕时间轴格式转换
自己喜欢收藏电影，有时网上能找到的中文字幕文件都不满足自己电影版本。在自己下载的压制版电影中已内封非中文srt字幕时，可以选择自己将srt的时间轴转为ass并替换ass中的时间轴。自己在频繁 复制粘贴改格式的时候想起可以用Python代码完成转换这一操作&…...
蓝桥杯 枚举
例题讲解 特别数的和 #include<iostream> using namespace std; bool ifspecial(int n){while(n){if(n%100||n%101||n%102||n%109){return true;} n/10;}return false; } int main(){int n;cin>>n;int sum0;for(int i1;i<n;i){if(ifspecial(i)){sumi;}}cout&l…...
告别传统打捞船：浅析‘子母船’协同算法如何解决水库、湖泊的浅水区垃圾清理难题
水域清洁革命：子母船协同算法如何重塑浅水区垃圾治理格局 清晨的阳光洒在湖面上，波光粼粼中却漂浮着刺眼的塑料瓶和食品包装——这是全球水库、湖泊管理者每天都要面对的环保噩梦。传统清漂方式在浅水区域显得力不从心，而一种融合了分布式机…...
通过curl命令快速测试Taotoken API为大赛创意生成提供灵感
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 通过curl命令快速测试Taotoken API为大赛创意生成提供灵感 对于赛事组织者而言，快速验证技术方案、获取创意灵感是日常…...
手把手教你用Obsidian+Excalidraw画流程图，告别切换软件的麻烦
手把手教你用ObsidianExcalidraw画流程图，告别切换软件的麻烦 每次写技术文档时，最让我头疼的就是画流程图。原本思路清晰，一打开绘图软件就卡壳——要么是工具太复杂，要么是画完图还要导出再插入笔记，来回切换几次灵感…...
揭秘Delphi二进制逆向分析神器：IDR深度探索与实践指南
揭秘Delphi二进制逆向分析神器：IDR深度探索与实践指南 【免费下载链接】IDR Interactive Delphi Reconstructor 项目地址: https://gitcode.com/gh_mirrors/id/IDR 在逆向工程和安全分析领域，Delphi编译的二进制文件常常让分析人员感到棘手。这些…...
Google I/O 2026 推出 Antigravity SDK：本地构建 AI Agent，灵活定制功能
Antigravity SDK 登场当开发者需要将 AI 能力嵌入自有应用时，常见做法是通过 API 调用远程 Agent 服务，但这种方式存在延迟高、定制性差、依赖网络等问题。据悉，Google 在 I/O 2026 大会上给出了另一种解法 ---- Antigravity SDK，…...
给Hadoop初学者的环境搭建备忘录：为什么你的JDK配置总在重启后‘消失’？（Linux基础解惑）
Hadoop环境搭建中的Linux系统原理：为什么你的配置总在重启后"消失"？ 很多Hadoop初学者在搭建开发环境时，都会遇到一个令人困惑的问题：明明按照教程一步步配置好了JDK和Hadoop，为什么重启后环境变量就"消…...
高性能自动化网页信息提取工具实战指南：大规模目标扫描与安全检测技术方案
高性能自动化网页信息提取工具实战指南：大规模目标扫描与安全检测技术方案 【免费下载链接】URLFinder 一款快速、全面、易用的页面信息提取工具，可快速发现和提取页面中的JS、URL和敏感信息。 项目地址: https://gitcode.com/gh_mirrors/ur/URLFinder…...
Sora 2发布即封神？Veo 2悄悄升级3项底层架构，92%开发者尚未察觉的性能跃迁，
更多请点击： https://kaifayun.com 第一章：Sora 2与Veo 2对比评测 核心定位与架构差异 Sora 2 是 OpenAI 推出的原生视频生成模型，基于扩散 Transformer 架构，支持长达 60 秒、1080p 分辨率的连贯视频生成，其训练数据…...
Unity URP专业UI模糊效果实战指南：4步实现高性能毛玻璃界面
Unity URP专业UI模糊效果实战指南：4步实现高性能毛玻璃界面 【免费下载链接】Unified-Universal-Blur UI blur (translucent) effect for Unity. 项目地址: https://gitcode.com/gh_mirrors/un/Unified-Universal-Blur 在Unity游戏开发中，UI界面的…...
终极指南：如何用Prodigal在3分钟内完成原核生物基因预测
终极指南：如何用Prodigal在3分钟内完成原核生物基因预测 【免费下载链接】Prodigal Prodigal Gene Prediction Software 项目地址: https://gitcode.com/gh_mirrors/pr/Prodigal 还在为复杂的基因预测工具头疼吗？面对海量的微生物基因组数据&…...