Highcharts向下钻取到详细图表

问题描述 投票:1回答:1

我想创建一个向下钻取的图表。

您可以找到不起作用的jsfiddle link,但其中包含示例数据。

data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
                }]
            },
            {
                name: 'B1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
            },
            {
                name: 'C1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
            }

        ]

反之亦然正在运行here

datanormal = [{
                name: '6',
                data: [{
                    name: 'A1',
                    y: 14,
                    drilldown: 'Details1'
                }, {
                    name: 'B1',
                    y: 19,
                    drilldown: 'Details1'
                }, {
                    name: 'C1',
                    y: 21,
                    drilldown: 'Details1'
                }]
            }, 
            {
                name: '7',
                data: [{
                    name: 'A1',
                    y: 5,
                    drilldown: 'Details1'
                } ...]
            }];
            datadrill = 
            [{
                    id: 'Details1',
                    name: 'Details1',
                    data: [
                        ['D1', 4],
                        ['D2', 2],
                        ['D3', 1],
                        ['D4', 4]
                    ]
            }];

我需要相反的内容,从基本到复杂。

This is the main column chart image

This is the detailed drill-down chart image

javascript highcharts
1个回答
0
投票

如果您查看工作示例,则数据钻探还有另一个对象:

datadrill = 
            [{
                    id: 'Details1',
                    name: 'Details1',
                    data: [
                        ['D1', 4],
                        ['D2', 2],
                        ['D3', 1],
                        ['D4', 4]
                    ]
            }]

您需要对代码执行相同的操作。

© www.soinside.com 2019 - 2024. All rights reserved.