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

news2024/11/15 23:38:03

文章目录

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

一、问题背景

  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.coloradmin.cn/o/1408587.html

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

相关文章

vue打包后与本地测试样式不同问题,element-ui样式打包部署前后样式不同。

个别文件的样式中<style>未加scope。 查找到一些文件中修改了对应页面的elementUI的样式&#xff0c;但未加scope 给<style>加上scope&#xff0c;就好了。

shell脚本登录dlut-lingshui并设置开机连网和断网重连

本文提供了一个用于无图形界面linux系统自动连接dlut-lingshui校园网的shell脚本&#xff0c;并提供了设置开机联网以及断网重连的详细操作步骤。本文的操作在ubuntu 22.04系统上验证有效&#xff0c;在其他版本的linux系统上操作时遇到问题可以自行百度。 1. 获取校园网认证界…

面试题之RocketMq

1. RocketMq的组成及各自的作用&#xff1f; 在RocketMq中有四个部分组成&#xff0c;分别是Producer&#xff0c;Consumer&#xff0c;Broker&#xff0c;以及NameServer&#xff0c;类比于生活中的邮局&#xff0c;分别是发信者&#xff0c;收信者&#xff0c;负责暂存&#…

C#学习(十)——WPF重构与美化

一、Entity Framework Core 特点&#xff1a;【跨平台】&#xff0c;【建模】&#xff0c;【查询、更改、保存】&#xff0c;【并发】&#xff0c;【事务】&#xff0c;【缓存】&#xff0c;【数据迁移】 EF的组件 二、重构&#xff1a;构建数据模型 项目延续C#学习(九)的 项…

【GitHub项目推荐--生成你的马赛克风格头像】【转载】

这个开源项目有意思&#xff0c;这是一个利用各种其他更小的图像来创建新图像的工具&#xff0c;小的图像包括圆圈、线条、波浪、十字绣、积木、Minecraft 积木、回形针、字母等&#xff0c;所以通过这些小图像开生成的新图像的可能性是无限的。 所以&#xff0c;它与其他马赛…

微信小程序(十四)分包和分包预加载

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.分包的配置 2.分包预加载的写法 先说说为什么需要分包&#xff1a; 小程序追求小而快&#xff0c;主包的大小控制是小程序上线的硬性要求&#xff0c;分包有利于小程序优化加载速度 分包的注意事项&#xff1a; 单个分…

Sulfo-Cy3-dCTP,Sulfo Cyanine3 dCTP,能够发出高强度的荧光信号

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Sulfo-Cy3-dCTP&#xff0c;Sulfo Cyanine3 dCTP&#xff0c;磺化-Cy3-dCTP&#xff0c;Sulfo-Cyanine3-dCTP 一、基本信息 产品简介&#xff1a;Sulfo Cy3 dCTP, a water-soluble cyanine dye CY3 labeled dCTP, i…

链表OJ---排序链表

https://leetcode.cn/problems/7WHec2/description/ //合并 struct ListNode* merge_link(struct ListNode* head1, struct ListNode* head2) {struct ListNode* temhead malloc(sizeof(struct ListNode));temhead->val 0;struct ListNode *tmp temhead, *cur1 head1, *…

Endnote中文献数据库的整体导出迁移,以及导入到新计算机具体步骤-以Endnote X8为例

Endnote中文献数据库的整体导出迁移&#xff0c;以及导入到新计算机具体步骤-以Endnote X8为例 在学习和研究中&#xff0c;有时会使用文献管理工具Endnote会积累一些重要的文献&#xff0c;当对某个问题进行了深入研究后&#xff0c;可能会积累成百上千的文献及其文献批注等。…

【GitHub项目推荐--网站归档平台】【转载】

ArchiveBox&#xff1a;网站归档平台 ArchiveBox 是基于 Python 的强大网页归档解决方案&#xff0c;可以自动把网页变成静态页面&#xff08;HTML、PDF、图片&#xff09;&#xff0c;并自动提取和保存文本、音频等内容&#xff0c;可以用来做镜像站、档案馆、离线阅读等。 开…

笔记本外接显示器的配置方法

目录 第一步 点击左下角&#xff0c;选择“设置” 第二步 选择系统&#xff0c;默认进入屏幕页面&#xff0c;页面往下拉&#xff0c;找到多显示器下拉框 前提&#xff1a;插好显示器的电源插头且插上笔记本HDMI线 第一步 点击左下角&#xff0c;选择“设置” 第二步 选择系…

探索 XMLHttpRequest:网页与服务器的异步通信之道(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

gin路由篇

1. 基本路由 gin 框架中采用的路由库是基于httprouter做的 import ("net/http""github.com/gin-gonic/gin" )func main() {// 1.创建路由r : gin.Default()// 2.绑定路由规则&#xff0c;执行的函数// gin.Context&#xff0c;封装了request和responser.…

C++内存泄漏检测工具

在程序中增加相应的内存检测工具 #define CRTDBG MAP ALLOC #include <stdlib.h> #include <crtdbg.h> #ifdef DEBUG #ifndef DBGNEW #define DBG_NEW new (_NORMAL_BLOCK&#xff0c;_FILE_LINE_) #define new DBG NEW #endif #endif _CrtDumpMemoryLeaks(); …

linux条件判断练习

1.实现自动生成相应的压缩包 1.写一个脚本&#xff0c;完成如下功能 传递一个参数给脚本&#xff0c;此参数为gzip、bzip2或者xz三者之一&#xff1b; (1) 如果参数1的值为gzip&#xff0c;则使用tar和gzip归档压缩/etc目录至/backups目录中&#xff0c;并命名为/backups/etc-…

2024年图像处理与大数据信息应用国际会议(ICIPCDIA 2024)

2024年图像处理与大数据信息应用国际会议(ICIPCDIA 2024) 2024 International Conference on Image Processing and Big Data Information Applications(ICIPCDIA 2024) 数据库&#xff1a;EI,CPCI,CNKI,Google Scholar等检索 一、【会议简介】 ​2024年图像处理与大数据信息应…

李宏毅《机器学习 深度学习》简要笔记(一)

一、线性回归中的模型选择 上图所示&#xff1a; 五个模型&#xff0c;一个比一个复杂&#xff0c;其中所包含的function就越多&#xff0c;这样就有更大几率找到一个合适的参数集来更好的拟合训练集。所以&#xff0c;随着模型的复杂度提高&#xff0c;train error呈下降趋势…

专业130+总分420+上海交通大学819考研经验分享上海交大电子信息与通信工程

今年专业课819信号系统与信息处理&#xff08;ss和dsp&#xff09;130&#xff0c;总分420&#xff0c;如愿梦圆交大&#xff0c;以下总结了自己这一年专业课&#xff0c;基础课复习经历&#xff0c;希望对大家复习有所帮助。专业课819信号系统与信号处理&#xff1a; 交大819…

Redisson 分布式锁解决主从一致性问题的原理

目录 一、主从不一致产生原因 二、Redisson 解决主从一致性的原理 一、主从不一致产生原因 1. Redis 主从集群&#xff1a;主从读写分离&#xff0c;主节点将数据同步给从节点 主节点&#xff1a;增删改从节点&#xff1a;读 2. 主从同步存在延迟&#xff0c;若主节点宕机…

基于Python Django的大数据招聘数据分析系统,包括数据大屏和后台管理

基于Python Django的大数据招聘数据分析系统是一个综合利用大数据技术和数据可视化技术的招聘行业解决方案。该系统旨在帮助企业和招聘机构更好地理解和分析招聘市场的趋势和变化&#xff0c;从而提高招聘效率和质量。 首先&#xff0c;该系统提供了一个强大的后台管理功能&am…