echart 多表联动value为null时 tooltip 显示问题

news2024/10/5 15:27:13

两个图表,第一个有tooltip,第二个隐藏掉

两个图表的 series 如下

// ----- chart1 ----
 series: [
      {
          name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [320, 282, 391, 334, null, null, null],
          },
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [220, 232, 221, 234, 290, 430, 410],
          },
        ],

// ------ chart 2 -------
     series: [
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, null, null, null],
          },
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],

注意看series 的第一个元素中data中有 null 值,

显示如下:(当鼠标移动到下面这个图表上时,并没有出现tooptip)

修正:需要将series data 中的值,使第一个元素中的data 无null值即可

// ----- chart1 -----
series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [220, 232, 221, 234, 290, 430, 410],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [320, 282, 391, 334, null, null, null],
          },

//  ----- chart2 -----
series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, null, null, null],
          },
        ],

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1658334.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

现货黄金流程到何种程度?现货黄金在金融产品中的占比是多少?

踏入2024年以来,受美联储降息以及地缘局势紧张的影响,美元受压,避险情绪高涨,众多因素影响下黄金价格出现了强势的上涨,屡创历史新高。在上涨如此强劲的背景下,投资者希望通过黄金投资来实现资产增值。市场…

锁相环(PLL)经典书籍分享(可下载)

锁相环(PLL)作为一种确保系统同步的控制机制,广泛应用于频率合成、时钟恢复、信号调制与解调等多个方面。 探索锁相环(PLL)技术的深度和广度,最有效的途径之一便是通过专业书籍的系统学习。以下是为渴望掌…

每日OJ题_贪心算法三⑦_力扣991. 坏了的计算器

目录 力扣991. 坏了的计算器 解析代码 力扣991. 坏了的计算器 991. 坏了的计算器 难度 中等 在显示着数字 startValue 的坏计算器上,我们可以执行以下两种操作: 双倍(Double):将显示屏上的数字乘 2;递…

英伟达推出视觉语言模型:VILA

NVIDIA和MIT的研究人员推出了一种新的视觉语言模型(VLM)预训练框架,名为VILA。这个框架旨在通过有效的嵌入对齐和动态神经网络架构,改进语言模型的视觉和文本的学习能力。VILA通过在大规模数据集如Coy0-700m上进行预训练,采用基于LLaVA模型的…

Core Impact 21.5 (Windows) - 高级渗透测试

Core Impact 21.5 (Windows) - 高级渗透测试 Fortra | Core Security Penetration testing software, Release Feb 2024 请访问原文链接:Core Impact 21.5 (Windows) - 高级渗透测试,查看最新版。原创作品,转载请保留出处。 作者主页&…

多线程学习Day07

共享模型之不可变 从一个日期转换的问题开始 Slf4j(topic "c.Test1") public class Test1 {public static void main(String[] args) {SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd");for (int i 0; i < 10; i) {new Thread(() -> {…

20K薪资要什么水平?来看看25岁测试工程师的面试过程…_测试工程师薪资20k(2)

既有适合小白学习的零基础资料&#xff0c;也有适合3年以上经验的小伙伴深入学习提升的进阶课程&#xff0c;涵盖了95%以上软件测试知识点&#xff0c;真正体系化&#xff01; 由于文件比较多&#xff0c;这里只是将部分目录截图出来&#xff0c;全套包含大厂面经、学习笔记、…

无监督式学习

1.是什么&#xff1f; 无监督式学习与监督式学习**最大的区别就是&#xff1a;**没有事先给定的训练实例&#xff0c;它是自动对输入的示例进行分类或者分群&#xff1b; 优点&#xff1a;不需要标签数据&#xff0c;极大程度上扩大了我们的数据样本&#xff0c;其次不受监督信…

华为云CodeArts API专场直播来袭!——探索API全生命周期管理新趋势

API的全生命周期管理是否让你摸不清头脑&#xff1f;你是否对API的前沿技术和应用充满了好奇&#xff0c;渴望一探究竟&#xff1f; 华为云PaaS服务即将在5月10日16:00&#xff0c;为你带来一场别开生面的CodeArts API专场直播活动&#xff01; 你可以在轻松愉快的氛围中&…

Python网络编程 03 实验:FTP详解

文章目录 一、小实验FTP程序需求二、项目文件架构三、服务端1、conf/settings.py2、conf/accounts.cgf3、conf/STATUS_CODE.py4、启动文件 bin/ftp_server.py5、core/main.py6、core/server.py 四、客户端1、conf/STATUS_CODE.py2、bin/ftp_client.py 五、在终端操作示例 一、小…

【CTF-Crypto】RSA-选择明密文攻击 一文通

RSA&#xff1a;选择明密文攻击 关于选择明/密文攻击&#xff0c;其实这一般是打一套组合拳的&#xff0c;在网上找到了利用的思路&#xff0c;感觉下面这个题目是真正将这个问题实现了&#xff0c;所以还是非常棒的一道题&#xff0c;下面先了解一下该知识点&#xff1a;(来自…

Telegram Premium会员有什么功能?

Telegram Premium 是 Telegram 的付费版本&#xff0c;现已上线。付费版本被定位为帮助运行平台并进一步开发它的一种方式。但除此之外&#xff0c;它对你有什么好处&#xff1f;以下是Telegram Premium中包含的八个主要功能&#xff1a; 1.没有广告。 Telegram Premium是无广…

李飞飞团队 AI4S 最新洞察:16 项创新技术汇总,覆盖生物/材料/医疗/问诊……

不久前&#xff0c;斯坦福大学 Human-Center Artificial Intelligence (HAI) 研究中心重磅发布了《2024年人工智能指数报告》。 作为斯坦福 HAI 的第七部力作&#xff0c;这份报告长达 502 页&#xff0c;全面追踪了 2023 年全球人工智能的发展趋势。相比往年&#xff0c;扩大了…

[Linux]如何在Ubuntu 22.04系統安裝Node-red?

Node-red是一個建立在Node.js上的視覺化程式設計工具&#xff0c;其常見的應用情境為建置或轉換各項硬體之間的通信協定的物聯網或工聯網場域&#xff0c;其可藉由設置來安裝第三方應用模組來建置多樣的通信協定節點&#xff0c;包含modbus in/out, mqtt in/out, websocket in/…

Java数组创建与使用

一.创建和初始化 1.数组是怎么创建的&#xff1f; 直接举例子&#xff1a; int[] arr new int[10]; 这里只简单的举一个int开辟数组的例子。 可见java数组的创建于C语言是不同的。前面是一个int[ ]就是一个数组的数据类型&#xff0c;后面的arr是数组名&#xff0c;最后[…

【代码随想录——栈与队列】

1.栈和队列理论基础 栈和队列的原理大家应该很熟悉了&#xff0c;队列是先进先出&#xff0c;栈是先进后出。 2.用栈实现队列 type MyQueue struct {head []intheadSize intstore []intstoreSize int }func Constructor() MyQueue {return MyQueue{head : make([]int,100),h…

《ESP8266通信指南》11-Lua开发环境配置

往期 《ESP8266通信指南》10-MQTT通信&#xff08;Arduino开发&#xff09;-CSDN博客 《ESP8266通信指南》9-TCP通信&#xff08;Arudino开发&#xff09;-CSDN博客 《ESP8266通信指南》8-连接WIFI&#xff08;Arduino开发&#xff09;&#xff08;非常简单&#xff09;-CSD…

qt for android 无法进入调试c++代码解决方法

1.上一篇文章介绍了qt 5.15.13配合NDK25 的解决方法&#xff0c;但是还存在一个问题是可以调试qml代码但是无法进入c代码中。 在网上进行搜索&#xff0c;得到的答案是确实存在这个问题&#xff0c;包括这个qt6版本。 2.看来这个问题没有办法了&#xff0c;静下来思考下。这个…

AI助力临沂商贸的世界语言

“你好”“Bonjour”“Hola”……“中国老板娘”能够流利运用 17 种语言&#xff0c;近日在海外爆火。借由 AI 技术的助力&#xff0c;商家在镜头前自如切换各国语言&#xff0c;与来自全球各地的外商实现无障碍的沟通交流。这种现象背后&#xff0c;是 AI 技术对传统商贸模式的…

Python 控制 Keysight (原Agilent) 直流电源

前言 直流电源是如图型号,是keysight 6631系列;由于本身直流电源的功能也不复杂,所以控制起来相对比较简单,本来不想写这篇文章的,但是想想还是做一个简单的记录吧! 硬件环境结构图: 通信方式:由于该直流电源只GPIB接口,所以是通过GPIB线与设备进行通信 实现原理: …