Javascript 颜色停止热图线画布

Question

我在数组中有一个数字数据（数组可以是任何数字长度）：

我想在画布上创建类似的东西，在一行中呈现彩色数据（例如图片上有2行）：

白色代表零，数字越大颜色越深。

我找不到类似的东西，我唯一发现的是：为热图创建颜色的算法是什么？

我认为我首先需要将值从 0 - 1 标准化。然后当然将其转换为颜色。

我不想使用外部库（我看了，Chartjs没有这样的例子），而是简单的画布。

var values = [0, 4, 44, 11, 55, 2, 6, 0, 0, 0, 0, 0, 0, 3, 2, 4, 2, 22, 55, 6, 44, 34, 56, 26, 87, 93, 112, 115, 45, 6]

function normalize(min, max) {
  var delta = max - min;
  return function(val) {
    return (val - min) / delta;
  };
}

values = values.map(normalize(Math.min(...values), Math.max(...values)));

console.log(values)

var canvas = document.querySelector('#myCanvas'),
ctx = canvas.getContext('2d');

<canvas id="myCanvas" width="800" height="50"></canvas>

Answer 1

您可以使用画布的原生

fillRect

方法和基于 HSL 的

fillStyle

来设置颜色。

这是一种可能的实现，假设您希望将数据点显示为在整个画布上均匀分布的矩形：

var values = [0, 4, 44, 11, 55, 2, 6, 0, 0, 0, 0, 0, 0, 3, 2, 4, 2, 22, 55, 6, 44, 34, 56, 26, 87, 93, 112, 115, 45, 6]

function normalize(min, max) {
  var delta = max - min;
  return function(val) {
    return (val - min) / delta;
  };
}

values = values.map(normalize(Math.min(...values), Math.max(...values)));

console.log(values)

var canvas = document.querySelector('#myCanvas'),
ctx = canvas.getContext('2d');

var width = canvas.width;
var height = canvas.height;
var lengthOfEachValue = width / values.length;

values.forEach((value, index)=>{
    ctx.fillStyle = `hsl(235, 100%, ${(1 - value) * 100}%)`;
    ctx.fillRect(index * lengthOfEachValue, 0, lengthOfEachValue, height);
})

<canvas id="myCanvas" width="800" height="50"></canvas>