php - 如何将相同的highcharts系列放在一起

Question

我正在使用 highcharts 绘制柱形图

我有一个像这样的多个系列的柱形图

这是我的代码：

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