如何将相同的highcharts系列彼此并排放置

Question

i am using highcharts for drawing column charts

i have a column chart with multiple series like this

and this is my code :

$(function () {
        var chart;
        $(document).ready(function() {
                // Radialize the colors
                Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
                    return {
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.2).get("rgb")]
                        ]
                    };
                });

                chart = new Highcharts.Chart({
                chart: {
                    renderTo: "container"
                },
                title: {
                    text: "نمودار کلی عملکرد داوطلب",
                    style:
                    {
                        direction: "rtl",
                        fontSize: "16px"
                    }
                },
                yAxis: {
                    min: -33.3,
                    max: 100,
                    startOnTick: false,
                    title: {
                        enabled: true,
                        text: "درصد"
                    }
                },
                xAxis: {
                    categories: [' . implode(",", $chartCats) . ']
                },
                tooltip: {
                    formatter: function() {
                        return this.series.name+"<br/>% "+this.point.y+"<br/>";
                    }
                },
                plotOptions: {
                    column: {
                        dataLabels: {
                            enabled: true
                        },
                        pointWidth: 20
                    },
                    series: {
                        animation: {
                            duration: 3000
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                series:
                [' . $chartData . ']
            });
        });
    });

how can i place all columns with same color beside each other?

for example : all blue columns beside each other then all red column beside each other

Answer 1

In general something like this is not supported, however you can split data into different arrays, as each column will be one series, just linked to 'master' one, see: http://jsfiddle.net/CVvjZ/

Of course this has limitations, since you need to pre calculate values for for x:

    xAxis: {
        min: 0,
        startOnTick: true,
        max: 1,
        endOnTick: true,
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        column: {
            grouping: false,
            pointWidth: 20
        }
    },
    series: [{
        color: colors[0],
        name: 'Tokyo',
        id: 'tokyo',
        data: [[0.3, 15]]
    }, {
        color: colors[0],
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [[0, 10]]
    }, {
        color: colors[0],
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [[-0.3, 10]]
    },{
        color: colors[1],
        name: 'Osaka',
        id: 'osaka',
        data: [[1.3, 15]]
    }, {
        color: colors[1],
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[1, 10]]
    }, {
        color: colors[1],
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[0.7, 10]]
    }]

There is also second solution, a little easier is to use stacking options instead of calculating values: http://jsfiddle.net/CVvjZ/1/

And code:

xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        color: colors[0],
        stack: 1,
        name: 'Tokyo',
        id: 'tokyo',
        data: [15]
    }, {
        color: colors[0],
        stack: 2,
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [15]
    }, {
        color: colors[0],
        stack: 3,
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [11]
    },{
        color: colors[1],
        stack: 1,
        name: 'Osaka',
        id: 'osaka',
        data: [[1,12]]
    }, {
        color: colors[1],
        stack: 2,
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[1,13]]
    }, {
        color: colors[1],
        stack: 3,
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[1,14]]
    }]