javascript中的颜色范围 [英] colour range in javascript

问题描述

使用JavaScript，如果我有一个低整数和一个高整数，并且我想制定一系列HEX颜色，以表示这个范围内的不同线索......那么最好的方法是

我可以举一个例子：

  //计算总价值
 var total = 0; 
 for（d in data）{
 total + = data [d] .value; 
} 
 
 //我们的主色
 var r = 150，g = 200，b = 250，
 
 //一些颜色计算基于价值和总价值
 
 val =（data [iso] .value / total）* 35; 
 
 r  -  = Math.round（val * 30）; 
 g  -  = Math.round（val * 30）; 
 b  -  = Math.round（val * 30）; 
  

这段代码目前正试图创建一系列的颜色，但它会落在一个非常大的数字被传递给它，因为它对r，g和b中的每一个都低于0，导致它对于颜色目的没有好处......如果你明白我的意思吗？

任何人都可以提出更好的方法吗？谢谢。

解决方案

将输入标准化为[0,1]范围，然后使用该值在两种有效颜色之间进行插值。

  var norm =（value  -  minimum）/（maximum  -  minimum）; 
 r = Math.round（norm * minRed +（1  -  norm）* maxRed）; 
 g = Math.round（norm * minGreen +（1  -  norm）* maxGreen）; 
 b = Math.round（norm * minBlue +（1  -  norm）* maxBlue）; 
  

Using JavaScript, if I've got a low integer, and a high integer, and I wanted to work out a range of HEX colours, to represent the different vlues within that range... what would be the best way of doing it?

I can give an example:

// calculate total value
var total = 0;
for( d in data ){
  total += data[d].value;
}

// Our main color
var r=150,g=200,b=250,

// some color calculations based on value and total value

val = (data[iso].value/total)*35;

r -= Math.round(val*30);
g -= Math.round(val*30);
b -= Math.round(val*30);

This code is currently trying to create a range of colours, but it falls down where a very high number is passed to it, as it goes below 0 for each of r, g, and b, causing it to be no good for colour purposes... if you see what I mean?

Can anyone suggest a better way? Thank you.

解决方案

Normalize your input to the [0,1] range, then use that value to interpolate between two valid colors.

var norm = (value - minimum) / (maximum - minimum);
r = Math.round(norm * minRed   + (1 - norm) * maxRed);
g = Math.round(norm * minGreen + (1 - norm) * maxGreen);
b = Math.round(norm * minBlue  + (1 - norm) * maxBlue);

这篇关于javascript中的颜色范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！