css - Highcharts stylemode 和 colorByPoint

Question

我有一个 Highcharts 条形图，我希望每个条形为红色或绿色，具体取决于值是正数还是负数。我正在使用

plotOptions: {
    bar: {
    colorByPoint: true
    }
}

并设置我想使用的颜色。没有样式模式，颜色可以正常工作。使用样式模式，颜色会被 CSS 覆盖。如何同时使用样式模式和 colorByPoint？

参见 jsfiddle:http://jsfiddle.net/er1187/gbok7s33/

我的颜色只有在样式模式被注释掉时才有效

Answer 1

尝试用纯 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/