以值取色（自定义颜色域，设置始末颜色对应最大最小值，然后以给定值获取对应的颜色）

1. 插件由来
   之前项目开发过程中，项目经理提出了一个要求，这个 x值 要有个对应颜色，而且在绿色到红色的范围之内，就是值越大越接近红色，越小越接近绿色。就是以值取色。
2. 思路分析
   1). 自定义一个颜色色阶，可以接受 n 个颜色值，然后列出色阶;
   2). 把色阶上第一个颜色设置一个对应最小值，同理设置最大值;
   3). 然后把 x值 对比最小最大值中所在位置对应颜色所在位置而取得颜色，以下是 蓝色到红色 的色阶:
       
3. 具体实现
   1). 颜色值转换成rgb颜色
   

   var getRGBObj = function (color) {  
          var sColor = color.toLowerCase();  
               if (sColor && /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(sColor)) {  
                   if (sColor.length === 4) {  
                       var sColorNew = "#";  
                       for (var i = 1; i < 4; i += 1)  
                           sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));  
                       sColor = sColorNew;  
                   }  
                   var sColorChange = [];  
                   for (var i = 1; i < 7; i += 2) {  
                       sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));  
                   }  
                   return {r: sColorChange[0], g: sColorChange[1], b: sColorChange[2]};  
               } else if (sColor.indexOf("rgb") >= 0) {  
                   var subRgb = sColor.replace("rgb(", "").replace(")", "");  
                   var arrRgb = subRgb.split(",");  
                   r = parseInt(arrRgb[0]);  
                   g = parseInt(arrRgb[1]);  
                   b = parseInt(arrRgb[2]);  
                   return {r: r, g: g, b: b}  
               } else {  
                   return EN_COLOR[sColor];//EN_COLOR对象在最后面  
               }  
           }; 

   注：这里可以看到，没有rgba转rgb的代码，也就是说本插件仅支持rgb,十六进制颜色和英文名称颜色；因为背景颜色不确定，rgba这种有透明值的颜色很难转成rgb；
   
   2). 设置颜色域

   var arrColor = [];
   var dealRGB = function (ftRgb, ltRgb, arrColor, num) {  
       var oRgb = {  
           or: (ltRgb.r - ftRgb.r) / num,  
           og: (ltRgb.g - ftRgb.g) / num,  
           ob: (ltRgb.b - ftRgb.b) / num  
       };  
       for (var j = 0; j < num; j++) {  
           var curR = parseInt(ftRgb.r + oRgb.or * j);  
           var curG = parseInt(ftRgb.g + oRgb.og * j);  
           var curB = parseInt(ftRgb.b + oRgb.ob * j);  
           arrColor.push("rgb(" + curR + "," + curG + "," + curB + ")");  
       }  
   };  

   参数解析：ftRgb:首颜色，ltRfb:末颜色，arrColor:色阶数组，num:颜色粒度（即始末两个颜色之间划分 n 个颜色）；oRgb是划分粒度后的颜色偏差值
   
   3). 设值取值
       把 arrColor 数组的第一位设置对应最小值，同理，设置最大值；然后 x值所在最大最小值的位置就是对应 arrColor中的位置的值
4. 代码展示
   

   /* 
       自定义工具 
       I am lzy 
       2018-01-5 
   */  
     
   /* 
   插件-以值取色 
   使用方法说明： 
       1.此插件位原生js插件； 
          * 通过传入自定义颜色域（颜色数组），以及给定值和最大值最小值设置（最大最小值默认1000和0，不设置将使用默认值）， 
          * 然后返回给定值所对应的颜色。 
          * 注意：本方法不支持rgba颜色，原因：没有父节点的背景颜色难以转换成rgb颜色 
       2.获取对象 
           var val2RGB = Val2RGB(colors,maxNum,minNum); 
           colors:颜色数组(可以是一个颜色值，将会使用白色与其配色；必须)，可以是rgb,十六进制值，或英文名称值 
           maxNum:最大值（可选） 
           minNum:最小值（可选） 
       3.设置配置 
           val2RGB.getRGB(value,maxNum,minNum); 
           value:给定值(该值建议在最大最小值范围之内) 
           maxNum:最大值（范围, 可选） 
           minNum:最小值（范围，可选） 
           return:对应给定值的颜色(rgb值) 
    */  
   window.Val2RGB = function (colors, maxNum, minNum) {  
       var initRgb = function (colors, maxNum, minNum) {  
           if (!colors) throw new Error('颜色值未配置');  
           var attrColors = [];  
           if (Array.isArray(colors)) {  
               if (colors.length === 0) throw new Error('颜色组为空');  
               attrColors = colors;  
           } else {  
               attrColors.push(colors);  
           }  
           this.maxNum = maxNum || 1000;  
           this.minNum = minNum || 0;  
           this.num = 30;  
           this.arrColor = [];  
           if (this.minNum > this.maxNum) {  
               var temp = this.maxNum;  
               this.maxNum = this.minNum;  
               this.minNum = temp;  
           }  
           var getRGBObj = function (color) {  
               var sColor = color.toLowerCase();  
               if (sColor && /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(sColor)) {  
                   if (sColor.length === 4) {  
                       var sColorNew = "#";  
                       for (var i = 1; i < 4; i += 1)  
                           sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));  
                       sColor = sColorNew;  
                   }  
                   var sColorChange = [];  
                   for (var i = 1; i < 7; i += 2) {  
                       sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));  
                   }  
                   return {r: sColorChange[0], g: sColorChange[1], b: sColorChange[2]};  
               } else if (sColor.indexOf("rgb") >= 0) {  
                   var subRgb = sColor.replace("rgb(", "").replace(")", "");  
                   var arrRgb = subRgb.split(",");  
                   r = parseInt(arrRgb[0]);  
                   g = parseInt(arrRgb[1]);  
                   b = parseInt(arrRgb[2]);  
                   return {r: r, g: g, b: b}  
               } else {  
                   return EN_COLOR[sColor];  
               }  
           };  
           var dealRGB = function (ftRgb, ltRgb, arrColor, num) {  
               var oRgb = {  
                   or: (ltRgb.r - ftRgb.r) / num,  
                   og: (ltRgb.g - ftRgb.g) / num,  
                   ob: (ltRgb.b - ftRgb.b) / num  
               };  
               for (var j = 0; j < num; j++) {  
                   var curR = parseInt(ftRgb.r + oRgb.or * j);  
                   var curG = parseInt(ftRgb.g + oRgb.og * j);  
                   var curB = parseInt(ftRgb.b + oRgb.ob * j);  
                   arrColor.push("rgb(" + curR + "," + curG + "," + curB + ")");  
               }  
           };  
           if (attrColors.length === 1) {  
               dealRGB({r: 255, g: 255, b: 255}, getRGBObj(attrColors[0]), this.arrColor, this.num);  
           } else {  
               for (var i = 0; i < attrColors.length - 1; i++) {  
                   dealRGB(getRGBObj(attrColors[i]), getRGBObj(attrColors[i + 1]), this.arrColor, this.num);  
               }  
           }  
       };  
       initRgb.prototype.getRGB = function (value,maxNum,minNum) {  
           var val = value || 0, max = maxNum || this.maxNum, min = minNum || this.minNum;  
           if (val > max) val = max;  
           if (val < min) val = min;  
           val = val - min;  
           max = max - min;  
           var idx = Math.round(val / (max / this.arrColor.length));  
           return this.arrColor[idx === this.arrColor.length ? idx - 1 : idx];  
     
       };  
       var EN_COLOR=null;//请复制6标题下面那部分  
       return new initRgb(colors, maxNum, minNum);  
   }; 

5. 使用方法
   

   //这里的颜色数组不限制长度；也可以是一个颜色值（将会与白色配对）；该对象固定了最大最小值  
   var val2RGB = Val2RGB(["green", "red"], max, min);  
   var myRgb = val2RGB.getRGB(val); //该值 val 所在max和min之间对应的颜色值  
     
   var newMax=1500,newMin=100;  
   //这里将使用新设置的最大最小值只是当前方法一次有效，不影响原有 val2RGB对象已经设置的最大最小值，  
   //即再次调用 getRGB()  时，最大最小值还是max和min;  
   myRgb = val2RGB.getRGB(val,newMax,newMin);

6. 英文颜色对象
   

   var EN_COLOR={aliceblue:{r:240,g:248,b:255},antiquewhite:{r:250,g:235,b:215},aqua:{r:0,g:255,b:255},aquamarine:{r:127,g:255,b:212},azure:{r:240,g:255,b:255},beige:{r:245,g:245,b:220},bisque:{r:255,g:228,b:196},black:{r:0,g:0,b:0},blanchedalmond:{r:255,g:235,b:205},blue:{r:0,g:0,b:255},blueviolet:{r:138,g:43,b:226},brown:{r:165,g:42,b:42},burlywood:{r:222,g:184,b:135},cadetblue:{r:95,g:158,b:160},chartreuse:{r:127,g:255,b:0},chocolate:{r:210,g:105,b:30},coral:{r:255,g:127,b:80},cornflowerblue:{r:100,g:149,b:237},cornsilk:{r:255,g:248,b:220},crimson:{r:220,g:20,b:60},cyan:{r:0,g:255,b:255},darkblue:{r:0,g:0,b:139},darkcyan:{r:0,g:139,b:139},darkgoldenrod:{r:184,g:134,b:11},darkgray:{r:169,g:169,b:169},darkgreen:{r:0,g:100,b:0},darkkhaki:{r:189,g:183,b:107},darkmagenta:{r:139,g:0,b:139},darkolivegreen:{r:85,g:107,b:47},darkorange:{r:255,g:140,b:0},darkorchid:{r:153,g:50,b:204},darkred:{r:139,g:0,b:0},darksalmon:{r:233,g:150,b:122},darkseagreen:{r:143,g:188,b:143},darkslateblue:{r:72,g:61,b:139},darkslategray:{r:47,g:79,b:79},darkturquoise:{r:0,g:206,b:209},darkviolet:{r:148,g:0,b:211},deeppink:{r:255,g:20,b:147},deepskyblue:{r:0,g:191,b:255},dimgray:{r:105,g:105,b:105},dodgerblue:{r:30,g:144,b:255},feldspar:{r:209,g:146,b:117},firebrick:{r:178,g:34,b:34},floralwhite:{r:255,g:250,b:240},forestgreen:{r:34,g:139,b:34},fuchsia:{r:255,g:0,b:255},gainsboro:{r:220,g:220,b:220},ghostwhite:{r:248,g:248,b:255},gold:{r:255,g:215,b:0},goldenrod:{r:218,g:165,b:32},gray:{r:128,g:128,b:128},green:{r:0,g:128,b:0},greenyellow:{r:173,g:255,b:47},honeydew:{r:240,g:255,b:240},hotpink:{r:255,g:105,b:180},indianred:{r:205,g:92,b:92},indigo:{r:75,g:0,b:130},ivory:{r:255,g:255,b:240},khaki:{r:240,g:230,b:140},lavender:{r:230,g:230,b:250},lavenderblush:{r:255,g:240,b:245},lawngreen:{r:124,g:252,b:0},lemonchiffon:{r:255,g:250,b:205},lightblue:{r:173,g:216,b:230},lightcoral:{r:240,g:128,b:128},lightcyan:{r:224,g:255,b:255},lightgoldenrodyellow:{r:250,g:250,b:210},lightgrey:{r:211,g:211,b:211},lightgreen:{r:144,g:238,b:144},lightpink:{r:255,g:182,b:193},lightsalmon:{r:255,g:160,b:122},lightseagreen:{r:32,g:178,b:170},lightskyblue:{r:135,g:206,b:250},lightslateblue:{r:132,g:112,b:255},lightslategray:{r:119,g:136,b:153},lightsteelblue:{r:176,g:196,b:222},lightyellow:{r:255,g:255,b:224},lime:{r:0,g:255,b:0},limegreen:{r:50,g:205,b:50},linen:{r:250,g:240,b:230},magenta:{r:255,g:0,b:255},maroon:{r:128,g:0,b:0},mediumaquamarine:{r:102,g:205,b:170},mediumblue:{r:0,g:0,b:205},mediumorchid:{r:186,g:85,b:211},mediumpurple:{r:147,g:112,b:216},mediumseagreen:{r:60,g:179,b:113},mediumslateblue:{r:123,g:104,b:238},mediumspringgreen:{r:0,g:250,b:154},mediumturquoise:{r:72,g:209,b:204},mediumvioletred:{r:199,g:21,b:133},midnightblue:{r:25,g:25,b:112},mintcream:{r:245,g:255,b:250},mistyrose:{r:255,g:228,b:225},moccasin:{r:255,g:228,b:181},navajowhite:{r:255,g:222,b:173},navy:{r:0,g:0,b:128},oldlace:{r:253,g:245,b:230},olive:{r:128,g:128,b:0},olivedrab:{r:107,g:142,b:35},orange:{r:255,g:165,b:0},orangered:{r:255,g:69,b:0},orchid:{r:218,g:112,b:214},palegoldenrod:{r:238,g:232,b:170},palegreen:{r:152,g:251,b:152},paleturquoise:{r:175,g:238,b:238},palevioletred:{r:216,g:112,b:147},papayawhip:{r:255,g:239,b:213},peachpuff:{r:255,g:218,b:185},peru:{r:205,g:133,b:63},pink:{r:255,g:192,b:203},plum:{r:221,g:160,b:221},powderblue:{r:176,g:224,b:230},purple:{r:128,g:0,b:128},red:{r:255,g:0,b:0},rosybrown:{r:188,g:143,b:143},royalblue:{r:65,g:105,b:225},saddlebrown:{r:139,g:69,b:19},salmon:{r:250,g:128,b:114},sandybrown:{r:244,g:164,b:96},seagreen:{r:46,g:139,b:87},seashell:{r:255,g:245,b:238},sienna:{r:160,g:82,b:45},silver:{r:192,g:192,b:192},skyblue:{r:135,g:206,b:235},slateblue:{r:106,g:90,b:205},slategray:{r:112,g:128,b:144},snow:{r:255,g:250,b:250},springgreen:{r:0,g:255,b:127},steelblue:{r:70,g:130,b:180},tan:{r:210,g:180,b:140},teal:{r:0,g:128,b:128},thistle:{r:216,g:191,b:216},tomato:{r:255,g:99,b:71},turquoise:{r:64,g:224,b:208},violet:{r:238,g:130,b:238},violetred:{r:208,g:32,b:144},wheat:{r:245,g:222,b:179},white:{r:255,g:255,b:255},whitesmoke:{r:245,g:245,b:245},yellow:{r:255,g:255,b:0},yellowgreen:{r:154,g:205,b:50}};