前端生成渐进色

前端项目涉及地图可视化，图层填充要分段并按不同颜色显示，因此简单一记；

一、生成颜色

选择两个或两个以上颜色，会自动生成渐进色。下图是用两个颜色生成7个渐进色

image

也可选择多个颜色，如下图是7个颜色，第二张图是用这7个颜色生成了15个渐进色

image image

二、代码部分

function Rainbow(){
    let gradients =null;
    let minNum =0;
    let maxNum =100;
    let colours = ['ff0000', 'ffff00', '00ff00', '0000ff'];
    setColours(colours);
    function setColours (spectrum){
       if (spectrum.length <2) {
           throw new Error('Rainbow must have two or more colours.');
       }else {
           let increment = (maxNum - minNum)/(spectrum.length -1);
           let firstGradient =new ColourGradient();
           firstGradient.setGradient(spectrum[0], spectrum[1]);
           firstGradient.setNumberRange(minNum, minNum + increment);
           gradients = [ firstGradient ];
           for (let i =1; i < spectrum.length -1; i++) {
           let colourGradient =new ColourGradient();
           colourGradient.setGradient(spectrum[i], spectrum[i +1]);
           colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i +1));
           gradients[i] = colourGradient;
       }
       colours = spectrum;
    }
}

this.setSpectrum =function (){
    setColours(arguments);
    return this;
}

this.setSpectrumByArray =function (array){
    setColours(array);
    return this;
}

this.colourAt =function (number){
    if (isNaN(number)) {
        throw new TypeError(number +' is not a number');
    }else if (gradients.length ===1) {
        return gradients[0].colourAt(number);
    }else {
        let segment = (maxNum - minNum)/(gradients.length);
        let index =Math.min(Math.floor((Math.max(number, minNum) - minNum)/segment), gradients.length -1);
        return gradients[index].colourAt(number);
    }
}

this.colorAt =this.colourAt;

this.setNumberRange =function (minNumber, maxNumber){
    if (maxNumber > minNumber) {
        minNum = minNumber;
        maxNum = maxNumber;
        setColours(colours);
    }else {
        throw new RangeError('maxNumber (' + maxNumber +') is not greater than minNumber (' + minNumber +')');
    }
    return this;
}

this.optionColours = [
    ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"], 
    ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],
 ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],
    ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"],
    ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],
    ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],
    ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],
["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],
["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],
["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],
["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],
["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],
["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],
["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],
["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],
["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],
["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],
["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],
["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],
["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],
["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],
["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],
["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],
["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],
["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],
["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],
["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],
["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],
["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],
["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],
["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],
["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],
["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],
["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],
["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]
]}

function ColourGradient(){
    let startColour ='ff0000';
    let endColour ='0000ff';
    let minNum =0;
    let maxNum =100;
    this.setGradient =function (colourStart, colourEnd){
        startColour =getHexColour(colourStart);
        endColour =getHexColour(colourEnd);
    }
    this.setNumberRange =function (minNumber, maxNumber){
        if (maxNumber > minNumber) {
            minNum = minNumber;
            maxNum = maxNumber;
        }else {
            throw new RangeError('maxNumber (' + maxNumber +') is not greater than minNumber (' + minNumber +')');
        }
    }
}

this.colourAt =function (number){
    return calcHex(number, startColour.substring(0,2), endColour.substring(0,2))+calcHex(number, startColour.substring(2,4), endColour.substring(2,4))+calcHex(number, startColour.substring(4,6), endColour.substring(4,6));
}

function calcHex(number, channelStart_Base16, channelEnd_Base16){
    let num = number;
    if (num < minNum) {
        num = minNum;
    }
    if (num > maxNum) {
        num = maxNum;
    }
    let numRange = maxNum - minNum;
    let cStart_Base10 =parseInt(channelStart_Base16, 16);
    let cEnd_Base10 =parseInt(channelEnd_Base16, 16);
    let cPerUnit = (cEnd_Base10 - cStart_Base10)/numRange;
    let c_Base10 =Math.round(cPerUnit * (num - minNum) + cStart_Base10);
    return formatHex(c_Base10.toString(16));
}

function formatHex(hex){
    if (hex.length ===1) {
        return '0' + hex;
    }else {
        return hex;
    }
}

function isHexColour(string){
    let regex =/^#?[0-9a-fA-F]{6}$/i;
    return regex.test(string);
}

function getHexColour(string){
    if (isHexColour(string)) {
        return string.substring(string.length -6, string.length);
    }else {
        let name = string.toLowerCase();
        if (colourNames.hasOwnProperty(name)) {
            return colourNames[name];
        }
        throw new Error(string +' is not a valid colour.');
    }
}

let colourNames = {
        aliceblue:"F0F8FF",
        antiquewhite:"FAEBD7",
        aqua:"00FFFF",
        aquamarine:"7FFFD4",
        azure:"F0FFFF",
        beige:"F5F5DC",
        bisque:"FFE4C4",
        black:"000000",
        blanchedalmond:"FFEBCD",
        blue:"0000FF",
        blueviolet:"8A2BE2",
        brown:"A52A2A",
        burlywood:"DEB887",
        cadetblue:"5F9EA0",
        chartreuse:"7FFF00",
        chocolate:"D2691E",
        coral:"FF7F50",
        cornflowerblue:"6495ED",
        cornsilk:"FFF8DC",
        crimson:"DC143C",
        cyan:"00FFFF",
        darkblue:"00008B",
        darkcyan:"008B8B",
        darkgoldenrod:"B8860B",
        darkgray:"A9A9A9",
        darkgreen:"006400",
        darkgrey:"A9A9A9",
        darkkhaki:"BDB76B",
        darkmagenta:"8B008B",
        darkolivegreen:"556B2F",
        darkorange:"FF8C00",
        darkorchid:"9932CC",
        darkred:"8B0000",
        darksalmon:"E9967A",
        darkseagreen:"8FBC8F",
        darkslateblue:"483D8B",
        darkslategray:"2F4F4F",
        darkslategrey:"2F4F4F",
        darkturquoise:"00CED1",
        darkviolet:"9400D3",
        deeppink:"FF1493",
        deepskyblue:"00BFFF",
        dimgray:"696969",
        dimgrey:"696969",
        dodgerblue:"1E90FF",
        firebrick:"B22222",
        floralwhite:"FFFAF0",
        forestgreen:"228B22",
        fuchsia:"FF00FF",
        gainsboro:"DCDCDC",
        ghostwhite:"F8F8FF",
        gold:"FFD700",
        goldenrod:"DAA520",
        gray:"808080",
        green:"008000",
        greenyellow:"ADFF2F",
        grey:"808080",
        honeydew:"F0FFF0",
        hotpink:"FF69B4",
        indianred:"CD5C5C",
        indigo:"4B0082",
        ivory:"FFFFF0",
        khaki:"F0E68C",
        lavender:"E6E6FA",
        lavenderblush:"FFF0F5",
        lawngreen:"7CFC00",
        lemonchiffon:"FFFACD",
        lightblue:"ADD8E6",
        lightcoral:"F08080",
        lightcyan:"E0FFFF",
        lightgoldenrodyellow:"FAFAD2",
        lightgray:"D3D3D3",
        lightgreen:"90EE90",
        lightgrey:"D3D3D3",
        lightpink:"FFB6C1",
        lightsalmon:"FFA07A",
        lightseagreen:"20B2AA",
        lightskyblue:"87CEFA",
        lightslategray:"778899",
        lightslategrey:"778899",
        lightsteelblue:"B0C4DE",
        lightyellow:"FFFFE0",
        lime:"00FF00",
        limegreen:"32CD32",
        linen:"FAF0E6",
        magenta:"FF00FF",
        maroon:"800000",
        mediumaquamarine:"66CDAA",
        mediumblue:"0000CD",
        mediumorchid:"BA55D3",
        mediumpurple:"9370DB",
        mediumseagreen:"3CB371",
        mediumslateblue:"7B68EE",
        mediumspringgreen:"00FA9A",
        mediumturquoise:"48D1CC",
        mediumvioletred:"C71585",
        midnightblue:"191970",
        mintcream:"F5FFFA",
        mistyrose:"FFE4E1",
        moccasin:"FFE4B5",
        navajowhite:"FFDEAD",
        navy:"000080",
        oldlace:"FDF5E6",
        olive:"808000",
        olivedrab:"6B8E23",
        orange:"FFA500",
        orangered:"FF4500",
        orchid:"DA70D6",
        palegoldenrod:"EEE8AA",
        palegreen:"98FB98",
        paleturquoise:"AFEEEE",
        palevioletred:"DB7093",
        papayawhip:"FFEFD5",
        peachpuff:"FFDAB9",
        peru:"CD853F",
        pink:"FFC0CB",
        plum:"DDA0DD",
        powderblue:"B0E0E6",
        purple:"800080",
        red:"FF0000",
        rosybrown:"BC8F8F",
        royalblue:"4169E1",
        saddlebrown:"8B4513",
        salmon:"FA8072",
        sandybrown:"F4A460",
        seagreen:"2E8B57",
        seashell:"FFF5EE",
        sienna:"A0522D",
        silver:"C0C0C0",
        skyblue:"87CEEB",
        slateblue:"6A5ACD",
        slategray:"708090",
        slategrey:"708090",
        snow:"FFFAFA",
        springgreen:"00FF7F",
        steelblue:"4682B4",
        tan:"D2B48C",
        teal:"008080",
        thistle:"D8BFD8",
        tomato:"FF6347",
        turquoise:"40E0D0",
        violet:"EE82EE",
        wheat:"F5DEB3",
        white:"FFFFFF",
        whitesmoke:"F5F5F5",
        yellow:"FFFF00",
        yellowgreen:"9ACD32"
    }
}

if (typeof module !=='undefined') {
    module.exports =Rainbow;
}