Question

我正在尝试深入查看分组和堆叠的柱形图。我的图表中有两个组，从技术上讲，有4个堆栈。我想深入研究每个堆栈。

这是我的分组和堆积柱形图：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>   
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="http://github.highcharts.com/highcharts.js"></script>
    <script src="http://github.highcharts.com/modules/drilldown.js"></script>
    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                xAxis: {
                    categories: ["1/5", "2/5", "3/5", "5/5"]
                },

                plotOptions: {
                    series: {
                        stacking: 'percent'
                    }
                },

                series: [
                    {
                        id: 'g1',
                        color: 'blue',
                        name: "group1",
                        data: [1, 2, 3, 4],
                        stack: "move"
                    },
                    {
                        linkedTo: 'g1',
                        color: 'blue',
                        name: "group1",
                        data: [5, 6, 7, 8],
                        stack: "delete"
                    },
                    {
                        id: 'g2',
                        color: 'green',
                        name: "group2",
                        data: [9, 10, 11, 12],
                        stack: "move"
                    },
                    {
                        linkedTo: 'g2',
                        color: 'green',
                        name: "group2",
                        data: [13, 14, 15, 16],
                        stack: "delete"
                    },
                    {
                        id: 'g3',
                        color: 'red',
                        name: "group3",
                        data: [17, 18, 19, 20],
                        stack: "move"
                    },
                    {
                        linkedTo: 'g3',
                        color: 'red',
                        name: "group3",
                        data: [21, 22, 23, 24],
                        stack: "delete"
                    },
                    {
                        id: 'g4',
                        color: 'yellow',
                        name: "group3",
                        data: [17, 18, 19, 20],
                        stack: "move"
                    },
                    {
                        linkedTo: 'g4',
                        color: 'yellow',
                        name: "group3",
                        data: [21, 22, 23, 24],
                        stack: "delete"
                    }

                ]
            });
        });
    </script>
</body>
</html>

但是不知道如何进行深入分析。我想在钻取中显示固定放置列，如下所示：

Answer 1

您需要为点添加drilldown属性。要在钻取中添加多个系列，请使用自定义钻取概念：

series: [{
        ...,
        data: [{
            y: 1,
            drilldown: true
        }, {
            y: 2,
            drilldown: true
        }, ...],
        drilldown: true
    }, ... ]

实时演示： http://jsfiddle.net/BlackLabel/5a2orf4t/

文档： https://www.highcharts.com/docs/chart-concepts/drilldown

类似的问题：

Drilldown for grouped column chart in highcharts

https://www.highcharts.com/forum/viewtopic.php?t=34240

需要深入了解堆叠和分组的柱状图

1 个答案: