HighCharts中的颜色分组条略有不同

Question

我有一个分组的HighCharts条形图，按组着色。例如，组1中的所有条都是蓝色的，组2是灰色的，组3是绿色的。现在我只需要在每组中稍微改变一下颜色。第一组有深蓝色条，普通蓝色条和浅蓝色条。第二组是深灰色，正灰色和浅灰色。我不知道如何在每一组中获得这些颜色变化。

$(function () {
var pWidth = 20, // points width
    pPadding = 5, // point padding
    gPadding = 15, // group padding
    categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    series = [{
        name: 'Year 1800',
        data: [107, 55, 635, 203, 30],
        color: 'red'
    }, {
        name: 'Year 1900',
        data: [133, 156, 550, 408, 45]
    }, {
        name: 'Year 2008',
        data: [500, 604, 404, 632, 60]
    }],
    sLen = series.length,
    cLen = categories.length;
var catWidth = 2 * gPadding + sLen * (pPadding + pWidth); 
// 2*gPadding = left group padding + right group padding
// sLen * pPadding = distance between points
// sLen * pWidth  = space taken by points itselves
// cat width = one category width/height
var height = catWidth * cLen;
var groupPadding = gPadding / catWidth;
$('#container').highcharts({
    chart: {
        height: height,
        type: 'bar',
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 0,
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: categories,
        title: {
            text: null,
        },
        labels: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: null,
        },
        labels: {
            enabled: false
        }
    },
    plotOptions: {
        bar: {
            pointWidth: pWidth,
            groupPadding: groupPadding
        },
        series: {
            colorByPoint: true
        }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    series: series
});

});

Answer 1

您可以在点配置中指定每种颜色。

代替:

data: [107, 55, 635, 203, 30],

使用:

data: [{y: 107, color: 'someColor'}, {y: 55, color: 'someColor'}, {y: 635, color: 'someColor'}, {y: 203, color: 'someColor'}, {y: 30, color: 'someColor'}],

这是一个更新后的小提琴，我用蓝色的阴影完成了第一组。