Make the frame color with the Highcharts color gamut the same color on the column chart

Highcharts accepts an array of colors for use in the series. I am making a column chart with a transparent fill color, and I would like the border color to be the same color but not transparent. I know that I can set borderColor for each series, but I'm not sure how many series I will have. Is there a way to select borderColor from an array, such as fill color?

Here is what I have and it works. It just gets complicated when I add a series programmatically. http://jsfiddle.net/scHST/

$(function () {
    $('#container').highcharts({
        colors: [
           'rgba(47,126,216,.3)', 
           'rgba(13,35,58,.3)', 
           'rgba(139,188,33,.3)', 
           'rgba(145,0,0,.3)', 
           'rgba(26,173,206,.3)', 
           'rgba(73,41,112,.3)',
           'rgba(242,143,67,.3)', 
           'rgba(119,161,229,.3)', 
           'rgba(196,37,37,.3)', 
           'rgba(166,201,106,.3)'
        ],
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                borderColor: '#303030',
                borderWidth: '2'
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            borderColor: 'rgba(47,126,216,1)'
        }, {
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            borderColor: 'rgba(13,35,58,1)'
        }, {
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            borderColor: 'rgba(139,188,33,1)'        
        }]
    });
});
+4
source share
1 answer

, highcharts , , Rooster, , , , , ,

var cols = new function() {
    var rgbs = [ 
        "47,126,216",
        "13,35,58",
        "139,188,33"
    ];
    this.get = function(i, a) {
        a = typeof a !== 'undefined' ? a : 1;
        return "rgba(" + rgbs[i] + "," + a + ")";
    };
    this.all = function(a) {
        var result = [];
        for(var i = 0; i < rgbs.length; i++) {
            result.push(this.get(i, a));   
        }
        return result;
    };
};

:

colors: cols.all(0.3)

borderColor: cols.get(0)

.

. http://jsfiddle.net/M7Y8h/

+1

Source: https://habr.com/ru/post/1534728/


All Articles