highcharts.css文件的样式覆盖了options的series里面的color问题解决

文章目录

  • 一、问题背景
  • 二、解决问题

一、问题背景

  1. 原本的charts我们的每个数据是有对应的color显示的,如下图:
    在这里插入图片描述
  2. 后面我们系统做了黑白模式,引入了highcharts的css文件,结果highcharts的css文件中class的颜色样式覆盖了我们数据中的color,影响之后的效果如下:
    在这里插入图片描述

二、解决问题

根据上述情况我暂时想到了有俩个方案解决:

  1. 覆盖highcharts.css的样式,使其不生效【本文的解决方案用的是这个(不考虑兼容问题)】
  2. 将每个数据加个额外的class然后去设置color !important【个人觉得麻烦,且不利于后续维护,所以没有选这个方案】(如果你的项目需要考虑兼容问题的话要选择这个方案)

根据第一个方案去解决非常简单,我们创建一个 highcharts.override.css文件

.highcharts-color-0 {fill: revert-layer!important;
}

PS:有没见过 revert-layer 属性值的同学请不要诧异,其实我也是偶然发现的。。。

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

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

相关文章

【云原生】Docker的端口映射、数据卷、数据卷容器、容器互联

目录 一、端口映射(相当于添加iptables的DANT) 二、数据卷创建(宿主机目录或文件挂载到容器中) 三、数据卷容器(多个容器通过同一个数据卷容器为基点,实现所有容器数据共享) 四、容器互联&am…

Java 设计者模式以及与Spring关系(六) 装饰和模版方法模式

简介: 本文是个系列一次会出两个设计者模式作用,如果有关联就三个,除此外还会讲解在spring中作用。 23设计者模式以及重点模式 我们都知道设计者模式有3类23种设计模式,标红是特别重要的设计者模式建议都会,而且熟读于心&#…

Deployment介绍

1、Deployment介绍 Deployment一般用于部署公司的无状态服务。 格式: apiVersion: apps/v1 kind: Deployment metadata: name: nginx-deployment labels: app: nginx spec: replicas: 3 selector: matchLabels: app: nginx template: metada…

菜鸟导入导出assetbundle

因为菜鸟不会用unity c#什么的,所以最后参考贴吧的方法用的是UABE(Unity Assets Bundle Extractor)和UABEA(Unity Assets Bundle Extractor Avalonia) 可以去github上下载 对于txt、xml什么的可以直接改,但是byte文件里还是会有一些类似乱码的东西&…

Qt5项目拆解第一集解决:中文乱码| 全局字体|注册表|QSS/CSS

# 一、乱码解决代码片段 QTextCodec是Qt中用于处理文本编码和字符集转换的类。它提供了一系列静态函数来实现不同编码的文本转换,包括编码转换、字符集检测和转换、以及数据流中的文本编码处理。QTextCodec类使得Qt可以在不同的编码和字符集之间进行无缝转换,从而方便地处理…

Switch用法以及新特性-最全总结版

本篇文章参考了大佬文章,感谢大佬无私分享: http://t.csdnimg.cn/MjZnX http://t.csdnimg.cn/QFg0x 目录 一、Switch用法:JDK7及以前 1.1、举例一: 1.2、举例二: 二、Switch穿透: 2.1、举例&#xf…

【Linux】常见指令(二)

前言 常见指令第二部分。 文章目录 一、指令&#xff08;下&#xff09;重定向>&#xff1a;输出重定向>>&#xff1a;追加输出<&#xff1a;输入重定向 10. more—显示文本文件内容11.less—逐屏浏览文本文件内容12. head13. tail管道 |14. date—时间指令在这里插…

2024年可能会用到的几个地图可视化模板

前言 在数字化的过程中&#xff0c;数据可视化变得越来越重要。用户喜欢通过酷炫的视觉效果和直观的数据展示来理解数据。可视化地图组件是数据可视化的重要组成部分。这些地图组件提供多样化的效果&#xff0c;能够更好地展示数据的关系和地理分布&#xff0c;直观地将数据与…

裁员潮中的自我成长,小故事,大鼓励

程序员裁员潮&#xff1a;技术变革下的职业危机 科技浪潮滚滚而来&#xff0c;我们了解科技&#xff0c;敬畏科技&#xff0c;拥抱科技。我们怕的不是裁员&#xff0c;而是自己无所适从的样子。 2023年&#xff0c;科技公司裁员的新闻屡见不鲜。据统计&#xff0c;今年以来&…

uniapp设置隐藏原生导航栏(3)

1、单个页面隐藏 在pages.json里配置 (第一种方式) {"path": "pages/home/index","style": {"navigationBarTitleText": "首页","navigationStyle": "custom" // 使用自定义导航栏&#xff0c;系统会关…

SpringBoot3+JDK21集成MyBatisPlus3.5.5

哈喽&#xff0c;大家好&#xff0c;我是呼噜噜&#xff0c;在上一篇文章SpringBoot3Jdk17来了 | 春见知识分享基础上&#xff0c;笔者把jdk17直接换成了jdk21一步到位&#xff0c;来踩踩坑 添加依赖 修改pom.xml文件&#xff1a; <dependency><groupId>com.baom…

日历的实现(java语言,包括钟表盘的实现、日历内部的日程提醒)

整理文件发现了大一的时候的作业&#xff0c;先感慨一波时间过得真的快&#xff01; 手中的这个是一个独立的java文件&#xff0c;可以直接就可以运行&#xff0c;应该是没有什么问题的。不想这个代码就此落灰了&#xff0c;希望可以给友友们带来一点点帮助&#xff01; 运行…

避免邮件进入垃圾箱的实用技巧:提高邮件接收率的策略

邮件进垃圾邮箱一部分原因是IP地址出现了问题&#xff0c;一部分是邮件内容。那我们应该怎么避免邮件进入垃圾邮箱呢&#xff1f; 1、邮件内容 1&#xff09;邮件标题 邮件标题是影响邮件打开率非常重要的因素&#xff0c;所以大家可能会在标题上放置一些吸引人的符号或者词…

聚道云连接器助力钉钉与金蝶云星辰无缝对接,实现多维度数据同步

客户介绍 某企业服务有限公司专注于为企业提供全方位、高质量的企业服务&#xff0c;致力于于企业管理咨询、企业形象策划、市场营销策划、财务管理咨询等方面。该公司拥有一支经验丰富、专业化的团队&#xff0c;他们深入了解企业需求&#xff0c;为客户提供个性化的解决方案…

列表的创建与删除

Python 中列表可以动态地添加、修改和删除元素&#xff0c;是 Python 编程中不可或缺的一部分。本文将介绍如何使用 Python 创建和删除列表&#xff0c;以及常用的方法和技巧。 创建列表 在 Python 中&#xff0c;我们可以使用一对方括号 [ ] 来创建一个空列表&#xff0c;也可…

开源免费无广告Gopeed,现代化的高速下载器,支持(HTTP、BitTorrent、Magnet)等多种协议下载,开源免费、无广告、高度可定制、不限速。

目录 特点 支持的平台 一键部署 体验 特点 全平台支持、开源免费&#xff0c;不限速、无广告 遵循 GPL-3.0 开源协议 支持&#xff08;HTTP、BitTorrent、Magnet&#xff09;协议下载 高速下载&#xff0c;底层使用golang协程并发下载 每日自动更新 tracker 列表 去中心…

IPv4 over IPv6简介

在IPv4 Internet向IPv6 Internet过渡的后期&#xff0c;IPv6网络已被大量部署&#xff0c;此时可能出现IPv4孤岛。利用隧道技术可在IPv6网络上创建隧道&#xff0c;从而实现IPv4孤岛的互连。这类似于在IP网络上利用隧道技术部署VPN。在IPv6网络上用于连接IPv4孤岛的隧道&#x…

Oracle触发器简单应用示例

目录 一、应用描述 【1】、应用场景&#xff1a; 【2】、具体场景&#xff1a; 二、表结构介绍 【1】表名介绍&#xff1a; 【2】表结构&#xff1a; 三、设置触发器 一、应用描述 【1】、应用场景&#xff1a; 现有一张库存明细以及销售明细表&#xff0c;销售明细表发生…

知识图谱符号表示比较:特性图、RDF和OWL

目录 前言1 特性图&#xff1a;灵活的图结构表示1.1 优势与灵活性1.2 存储优化与查询优势1.3 挑战&#xff1a;缺乏工业标准支持 2 RDF&#xff08;Resource Description Framework&#xff09;&#xff1a;面向Web的数据标准2.1 三元组结构的优势2.2 语义标准与词汇丰富性2.3 …

elment-plus如何引入scss文件实现自定义主题色

elment-plus如何引入scss文件实现自定义主题色&#xff01;如果您想修改elementPlus的默认主题色调&#xff0c;使用自定义的色调&#xff0c;可以考虑使用官方提供的解决办法。 第一步你需要在项目内安装sass插件包。 npm i sass -D 如图&#xff0c;安装完成后&#xff0c;你…