Question

我希望能够以渐变的方式为每个条形图添加不同的颜色，如下图所示

enter image description here

任何人都可以告诉我该怎么做吗？

Answer 1

这是使用ChartJS 2.4.0。 http://www.chartjs.org/docs/latest/charts/bar.html

在条形图中给定x个数据点，您需要生成x个颜色的数组：每个数据点一个颜色。

data: [10,20,30,40,50,60,70,80],
backgroundColor: ["#ded21e", "#cbd026", "#b8ce2d", "#a5cc35", "#93cb3c", "#80c944", "#6dc74b", "#5ac553"]

以下是CodePen：https://codepen.io/pgardner/pen/GyeBLW

归功于Neil McCallion，他的CodePen在这里做了很多工作：https://codepen.io/njmcode/pen/axoyD

这是基本功能：

function color() {
    // Converts a #ffffff hex string into an [r,g,b] array
    function hex2rgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? [
            parseInt(result[1], 16),
            parseInt(result[2], 16),
            parseInt(result[3], 16)
        ] : null;
    } 

    // Inverse of the above
    function rgb2hex(rgb) {
        return '#' + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
    }

    // Interpolates two [r,g,b] colors and returns an [r,g,b] of the result
    // Taken from the awesome ROT.js roguelike dev library at
    // https://github.com/ondras/rot.js
    function _interpolateRgb(color1, color2, factor) {
        if (arguments.length < 3) { factor = 0.5; }

        let result = color1.slice();

        for (let i=0;i<3;i++) {
            result[i] = Math.round(result[i] + factor*(color2[i]-color1[i]));
        }

        return result;
    }

    function rgb2hsl(color) {
        const r = color[0]/255;
        const g = color[1]/255;
        const b = color[2]/255;

        const max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max == min) {
            h = s = 0; // achromatic
        } else {
            let d = max - min;
            s = (l > 0.5 ? d / (2 - max - min) : d / (max + min));
            switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }

        return [h, s, l];
    }

    function hue2rgb(p, q, t) {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1/6) return p + (q - p) * 6 * t;
        if (t < 1/2) return q;
        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
    }

    function hsl2rgb(color) {
        let l = color[2];

        if (color[1] == 0) {
            l = Math.round(l*255);
            return [l, l, l];
        } else {
            let s = color[1];
            let q = (l < 0.5 ? l * (1 + s) : l + s - l * s);
            let p = 2 * l - q;
            let r = hue2rgb(p, q, color[0] + 1/3);
            let g = hue2rgb(p, q, color[0]);
            let b = hue2rgb(p, q, color[0] - 1/3);
            return [Math.round(r*255), Math.round(g*255), Math.round(b*255)];
        }
    }

    function _interpolateHsl(color1, color2, factor) {
        if (arguments.length < 3) { factor = 0.5; }

        let hsl1 = rgb2hsl(color1);
        let hsl2 = rgb2hsl(color2);
        for (let i=0;i<3;i++) {
            hsl1[i] += factor*(hsl2[i]-hsl1[i]);
        }
        return hsl2rgb(hsl1);
    }

    function generateGradient(color1, color2, total, interpolation) {
        const colorStart = typeof color1 === 'string' ? hex2rgb(color1) : color1;
        const colorEnd = typeof color2 === 'string' ? hex2rgb(color2) : color2;

        // will the gradient be via RGB or HSL
        switch(interpolation) {
        case 'rgb':
            return colorsToGradientRgb(colorStart, colorEnd, total);
        case 'hsl':
            return colorsToGradientHsl(colorStart, colorEnd, total);
        default:
            return false;
        }
    }

    function colorsToGradientRgb(startColor, endColor, steps) {
        // returns array of hex values for color, since rgb would be an array of arrays and not strings, easier to handle hex strings
        let arrReturnColors = [];
        let interimColorRGB;
        let interimColorHex;
        const totalColors = steps;
        const factorStep = 1 / (totalColors - 1);

        for (let idx = 0; idx < totalColors; idx++) {
            interimColorRGB = _interpolateRgb(startColor, endColor, factorStep * idx);
            interimColorHex = rgb2hex(interimColorRGB);
            arrReturnColors.push(interimColorHex);
        }

        return arrReturnColors;
    }

    function colorsToGradientHsl(startColor, endColor, steps) {
        // returns array of hex values for color, since rgb would be an array of arrays and not strings, easier to handle hex strings
        let arrReturnColors = [];
        let interimColorRGB;
        let interimColorHex;
        const totalColors = steps;
        const factorStep = 1 / (totalColors - 1);

        for (let idx = 0; idx < totalColors; idx++) {
            interimColorRGB = _interpolateHsl(startColor, endColor, factorStep * idx);
            interimColorHex = rgb2hex(interimColorRGB);
            arrReturnColors.push(interimColorHex);
        }

        return arrReturnColors;
    }


    return {
        generateGradient
    };
}

鉴于2种颜色＆＃39;＃ded21e＆＃39;和＆＃39;＃5ac553＆＃39;，你会以这种方式调用函数：

let arrBarGraphColors = color().generateGradient('#ded21e', '#5ac553', data.length, 'rgb');

指定＆＃39; rgb＆＃39;并且＆＃39; hsl＆＃39;。链接的CodePens应该让您了解两者之间的差异。

渐变条图JS

1 个答案: