需要向下钻取堆叠和分组的柱形图

问题描述 投票：0回答：1

我正在尝试在分组和堆积柱形图上钻取。我有两组，技术上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>

但无法理解如何使其向下钻取。我希望在向下钻取时显示固定的放置列，如下所示：

enter image description here

highcharts
1个回答
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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.