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 属性值的同学请不要诧异,其实我也是偶然发现的。。。

相关推荐

  1. Scrapy里面Xpath解析问题

    2024-01-25 14:00:01       27 阅读
  2. 【前端】修改iframe里面pdf样式

    2024-01-25 14:00:01       15 阅读
  3. vue3中覆盖组件样式方法

    2024-01-25 14:00:01       16 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-25 14:00:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-25 14:00:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-25 14:00:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-25 14:00:01       20 阅读

热门阅读

  1. ros中调用opencv绘图测试

    2024-01-25 14:00:01       35 阅读
  2. CaptureRequest部分参数说明

    2024-01-25 14:00:01       38 阅读
  3. 要在 Ubuntu 上开启 SSH(Secure Shell)服务器

    2024-01-25 14:00:01       31 阅读
  4. C++做vlc音视频

    2024-01-25 14:00:01       32 阅读
  5. C++区间覆盖(贪心算法)

    2024-01-25 14:00:01       35 阅读
  6. 【node】关于npm、yarn、npx的区别与使用

    2024-01-25 14:00:01       42 阅读
  7. c#模板设计模式

    2024-01-25 14:00:01       32 阅读
  8. 蓝桥杯题目-回文日期

    2024-01-25 14:00:01       42 阅读