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;
  }
  

请参阅更新的小提琴：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类。

请参阅更新的小提琴：http://jsfiddle.net/gbok7s33/7/