时间戳

首页 > 解决方案 > 使用javascript计算与数字对应的颜色

javascript - 使用javascript计算与数字对应的颜色

问题描述

我有一个数字数据，我需要将其绘制成网格并根据数字为每个块着色。较大的数字应具有较深的蓝色阴影，较小的应具有较浅的蓝色阴影。如何找到对应的颜色？

标签： javascriptreactjs

解决方案

你可以使用HSL颜色。第一个参数是色调，第二个是饱和度，第三个是亮度值。在色轮上，蓝色位于 240º，因此可以将 H 值设置为 240。然后可以将饱和度设置为 100%，将亮度值设置为基于输入数字的百分比（通过取最大值上的当前数据点）。

请参见下面的示例：

const data = [];
const MAX = 100;

const getColor = (n, max, error) => {
 return `hsl(240, 100%, ${(1-n/max) * 100}%)`
}

let html = "";
for(let i = 0; i < MAX; i++) {
  html += `<div class='box' style="background-color: ${getColor(i, MAX)}">${i}</div>`
}

document.body.innerHTML = html;
.box {
  width: 100px;
  height: 100px;
}

编辑

如果要添加边界，则要将 的输出压缩0-100为介于 之间0+bl to 100-br。这种类型的映射可以使用这里提出的公式来完成，其中bl是从左侧开始的边界（即：最低的蓝色）和br从右侧开始的边界（即：最深的蓝色）。

const data = [];
const MIN = 0; // min value in data (Math.min(...data))
const MAX = 100; // max value in data (Math.max(...data))

const map = (is, ie, os, oe, val) => os + ((oe - os) / (ie - is)) * (val - is);
const getColor = (n, min, max, bl=0, br=0) => {
 const l = 100 - map(min, max, bl, 100-br, n);
 return `hsl(240, 100%, ${l}%)`
}

let html = "";
for(let i = 0; i < MAX; i++) {
  html += `<div class='box' style="background-color: ${getColor(i, MIN, MAX, 10, 40)}">${i}</div>`
}

document.body.innerHTML = html;
.box {
  width: 100px;
  height: 100px;
}

推荐阅读