使用 Highcharts 5 对 dataLabels 样式参数进行颜色对比度设置不适用于某些颜色

Question

下面是一个简单的图表。具有可数据样式设置。请注意，较浅的颜色设置为白色（当它们应该设置为黑色时），这使其成为我的客户的抱怨项目，因为他们看不清它们。

这是代码（注意样式参数块）：

$(function () {
Highcharts.chart('containera', {
  chart:{ type:'column' },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
    series: {
    colorByPoint: true,
      dataLabels: {
        enabled: true,
        inside:true,
        style: {
          fontWeight: 'bold',
          color: 'contrast', 
          textShadow: false      
        }
      }
    }
  },
  series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
  });
});

这是小提琴（也在小提琴中忽略了 textshadow:false）：

http://jsfiddle.net/franktudor/98Ldn972/

这是图像（注意绿色和橙色）：

对比度的阈值是多少？它们可以作为全局更改吗？因为那样会很方便。如果可能的话，我有 200 个图表想要修复 highcharts 引擎认为全局对比度标签的浅色和深色的颜色。

Answer 1

当前的对比函数如下所示：

    /**
     * Returns white for dark colors and black for bright colors.
     *
     * @param {ColorString} rgba - The color to get the contrast for.
     * @returns {string} The contrast color, either `#000000` or `#FFFFFF`.
     */
    getContrast: function(rgba) {
        rgba = color(rgba).rgba;
        return rgba[0] + rgba[1] + rgba[2] > 2 * 255 ? '#000000' : '#FFFFFF';
    },

您可以扩展 highcharts 并覆盖该函数来控制对比度。我将测试从 更改为rgba[0] + rgba[1] + rgba[2] > 2 * 255， rgba[0] + rgba[1] + rgba[2] > 500它解决了您所说的问题。但是，您可能可以应用一些更好的颜色逻辑。

  // override getContrast function
  (function(H) {
    H.Renderer.prototype.getContrast = function(rgba) {
      rgba = H.Color(rgba).rgba;
      return rgba[0] + rgba[1] + rgba[2] > 500 ? '#000000' : '#FFFFFF';
    };
  }(Highcharts));

http://jsfiddle.net/98Ldn972/3/

编辑：刚刚注意到问题的 textShadow 部分。我认为你要删除的是 textOutline

style: {
    fontWeight: 'bold',
    color: "contrast",
    textOutline: false
}

http://jsfiddle.net/98Ldn972/4/