Question

Highcharts接受一系列颜色用于系列。我正在制作一个透明填充色的柱形图，我希望边框颜色是相同的颜色，但不是透明的。我知道我可以设置每个系列的borderColor，但我不确定我会有多少系列。有没有办法从数组中选择borderColor，就像填充颜色一样？

这是我拥有的，而且有效。当我以编程方式添加系列时，这变得很困难。 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)'        
        }]
    });
});

Answer 1

我不相信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/

在柱形图上使Highcharts边框颜色与背景颜色匹配

1 个答案: