Question

我有一个按组分色的HighCharts条形图。例如，组1中的所有条都是蓝色，组2是灰色，组3是绿色。现在我只需要在每组中有轻微的颜色变化。因此第1组将有一个深蓝色条，常规蓝色条和一个浅蓝色条。然后组2将具有深灰色，常规灰色和浅灰色。我无法弄清楚如何在每个组中获得这些颜色变化。感谢任何人提前调查此事。

$(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
});

}）;

Here is a fiddle.

Answer 1

您可以在point configuration中指定每种颜色。

而不是：

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'}],

这是一个updated fiddle，我用蓝色阴影完成了第一组。

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

1 个答案: