javascript - Highcharts 栏分组同时保持透明覆盖？

Question

我一直在尝试将以下月份图表分为四组，每组三组，代表每个季度。 http://jsfiddle.net/2mbnxdzj/代码也在下面。

我正在尝试保留所有当前的透明覆盖功能，但分组类似于:https://www.highcharts.com/docs/chart-and-series-types/bar-chart

我似乎不知道该怎么做。任何帮助将不胜感激

群组:

Q1 Jan  
   Feb  
   March

Q2 Apr
   May
   Jun

Q3 Jul
   Aug
   Sept

Q4 Oct
   Dec
   Nov

这是我的代码:

// First, let's make the colors transparent
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) 
{
    return Highcharts.Color(color)
        .setOpacity(0.5)
        .get('rgba');
})
});

Highcharts.chart('container', {
chart: {
    type: 'bar'
},
title: {
    text: 'Monthly Average Rainfall'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ]
},
yAxis: {
    min: 0,
    title: {
        text: 'Rainfall (mm)'
    }
},
legend: {
    layout: 'vertical',
    backgroundColor: '#FFFFFF',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    shadow: true
},
tooltip: {
    shared: true,
    valueSuffix: ' mm'
},
plotOptions: {
    bar: {
        grouping: false,
        shadow: false
    }
},
series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 
194.1, 95.6, 54.4],
    pointPadding: 0

}, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 
83.5, 106.6, 92.3],
    pointPadding: 0.1

}, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 
59.3, 51.2],
    pointPadding: 0.2

}, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 
46.8, 51.1],
    pointPadding: 0.3

}]

Answer 1

Highchart 本身没有此功能。我建议你使用插件 Grouped Categories .

然后使用该插件，您可以以嵌套方式配置您的类别:

xAxis: {
    categories: [{
        name: "Q1",
        categories: ["Jan", "Feb", "Mar"]
    }, {
        name: "Q2",
        categories: ["Apr", "May", "Jun"]
    }, {
        name: "Q3",
        categories: ["Jul", "Aug", "Sep"]
    }, {
        name: "Q4",
        categories: ["Oct", "Nov", "Dec"]
    }]
}

正在结帐:http://plnkr.co/edit/K9BRgqYWlNEYtkpm9xJJ?p=preview