如何将相同的高级系列放在一起

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

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