文章目录
- 一、问题背景
- 二、解决问题
一、问题背景
- 原本的charts我们的每个数据是有对应的color显示的,如下图:
- 后面我们系统做了黑白模式,引入了highcharts的css文件,结果highcharts的css文件中class的颜色样式覆盖了我们数据中的color,影响之后的效果如下:
二、解决问题
根据上述情况我暂时想到了有俩个方案解决:
- 覆盖highcharts.css的样式,使其不生效【本文的解决方案用的是这个(不考虑兼容问题)】
- 将每个数据加个额外的class然后去设置color !important【个人觉得麻烦,且不利于后续维护,所以没有选这个方案】(如果你的项目需要考虑兼容问题的话要选择这个方案)
根据第一个方案去解决非常简单,我们创建一个 highcharts.override.css文件
.highcharts-color-0 {
fill: revert-layer!important;
}
PS:有没见过 revert-layer 属性值的同学请不要诧异,其实我也是偶然发现的。。。