我有一个 Highcharts 条形图,我希望每个条形为红色或绿色,具体取决于值是正数还是负数。我正在使用
plotOptions: {
bar: {
colorByPoint: true
}
}
并设置我想使用的颜色。没有样式模式,颜色可以正常工作。使用样式模式,颜色会被 CSS 覆盖。如何同时使用样式模式和 colorByPoint?
参见 jsfiddle:http://jsfiddle.net/er1187/gbok7s33/
我的颜色只有在样式模式被注释掉时才有效
最佳答案
尝试用纯 CSS 解决问题:
- 禁用
colorByPoint
选项 为系列定义标准颜色,例如
.highcharts-color-0 { fill: #008000; stroke: #004000; }
Highcharts 为负数定义了一个
highcharts-negative
类,因此我们可以基于它覆盖默认颜色:.highcharts-negative { fill: #800000; stroke: #400000; }
查看更新的 fiddle :http://jsfiddle.net/gbok7s33/6/
编辑:如果总是有相同数量的数据点并且您想定位特定的数据点,请尝试重新启用 colorByPoint
并将 CSS 更新为:
[class^='highcharts-color-'], [class*=' highcharts-color-']{
fill: #008000;
stroke: #004000;
}
假设您要定位点 4,请使用以下内容(注意,从零开始的索引):
.highcharts-color-3 {
fill: #000080 !important;
stroke: #000040 !important;
}
注意:需要 !important
来覆盖 .highcharts-negative
类。
查看更新的 fiddle :http://jsfiddle.net/gbok7s33/7/
关于css - Highcharts stylemode 和 colorByPoint,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43739199/