如何將相同的highcharts系列彼此並排放置

Question

我正在使用圖表繪制柱狀圖

我有一個像這樣的多個系列的柱形圖

這是我的代碼：

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

如何將所有具有相同顏色的列彼此並排放置？

例如：所有藍色列彼此相鄰，然后所有紅色列彼此相鄰

Answer 1

通常不支持這種操作，但是您可以將數據拆分為不同的數組，因為每一列都是一個系列，僅鏈接到“主”系列，請參見： http : //jsfiddle.net/CVvjZ/

當然這有局限性，因為您需要預先計算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]]
    }]

還有第二種解決方案，更簡單的是使用堆棧選項而不是計算值： http : //jsfiddle.net/CVvjZ/1/

和代碼：

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