如何将此热图的渐变更改为背景为白色而不是黑色答案

【问题标题】：How do I change the gradient of this heat map for the background to be white instead of black如何将此热图的渐变更改为背景为白色而不是黑色
【发布时间】：2016-06-02 23:40:00
【问题描述】：

我正在尝试在我的绘图上制作一个热图图层，并且我有一个白色背景而不是黑色，因此给定的渐变渐变为黑色。我想保持相同的“方向”，以便红色是“最热”等，但不是黑色作为最小颜色，我希望它是白色的，所以它看起来适合我的原始情节。这是我的小提琴： http://jsfiddle.net/davidreed0/2hvLkf35/9/

我在这里将背景从黑色改为白色：

defaultColor = this.bgcolor || [0, 0, 0, 0];

但我不知道实际计算梯度的位置。

【问题讨论】：

标签： jquery flot heatmap

【解决方案1】：

在玩了一会儿你的小提琴之后，我想我已经发现了梯度的计算位置。

它使用 HSL 编码来表示颜色。关键是这里的亮度。随着值的下降，亮度也会下降。 HSL 定义色调的色调和饱和度，其中亮度定义亮度。亮度为 0 将是黑色，这只是您的情况。

所以调整例程：

HeatCanvas.defaultValue2Color = function(value) {
  var h = (1 - value );
  // now we make luminosity inversely proportional
  var l = 1 - value * 0.6; 
  var s = 0.8;
  var a = 1;
  return [h, s, l, a];
}

有效地淡出为白色。

您可能需要调整这些常量（0.6 和 0.8）以获得更好的结果。查看更新后的小提琴，看看它是否适合您的需求！

http://jsfiddle.net/2hvLkf35/14/

【讨论】：

是的，成功了。谢谢！关于如何在最低限度上使其不那么粉红色和更蓝的任何想法？
嗯，我不是 HSL 表示法方面的专家，但我敢打赌调整 HUE (H) 就可以了。色调控制颜色本身，饱和度（无饱和度=灰色，完全饱和度=鲜艳）和亮度控制亮度。