使用HighChart进行多级钻取

来源：互联网发布：文艺青年生活知乎编辑：程序博客网时间：2024/05/18 03:44

　　HighChart是个功能很强大的图标工具，可进行各种图标的展示，尤其可以进行数据钻取，包括多级钻取等，代码示例如下，三级钻取示例：
　　HighChart的代码编辑及示例查看，可以到这个网站进行：HighChart，效果如图：
　　这里写图片描述
　　正式代码如下：
　　

$(function () {    $('#container').highcharts({        chart: {            type: 'column'        },        title: {            text: '多级数据钻取--点击钻取'        },        legend: {            enabled: false        },        plotOptions: {            series: {                borderWidth: 0,                dataLabels: {                    enabled: true                }            }        },        xAxis: {            type: 'category'        },        series: [            {                name: 'Level1',                type: 'column',                colorByPoint: true,                data: [                    {                        y: 3.9,                        drilldown: '1-',                        name: '1'                    },                    {                        y: 4.9,                        drilldown: '2-',                        name: '2'                    },                    {                        y: 4.9,                        drilldown: '3-',                        name: '3'                    }                ]            }        ],        drilldown: {            series: [                {                    id: '1-',                    colorByPoint: true,                    name: '1-',                    data: [                        {                            name: '1-1',                            y: 5,                            drilldown: '1-1-'                        },                        {                            name: '1-2',                            y: 2,                            drilldown: '1-2-'                        }                    ]                },                {                    id: '1-2-',                    data: [                        {                            name: '1-2-1',                            y: 5                        },                        {                            name: '1-2-2',                            y: 2                        }                    ],                    colorByPoint: true                },                {                    id: '1-1-',                    colorByPoint: true,                    data: [                        {                            name: '1-1-1',                            y: 2                        },                        {                            name: '1-1-2',                            y: 4                        },                        {                            name: '1-1-3',                            y: 3                        },                        {                            name: '1-1-4',                            y: 1                        }                    ]                },                {                    id: '2-',                    colorByPoint: true,                    name: '2-',                    data: [                        {                            name: '2-1',                            y: 5,                            drilldown: '2-1-'                        },                        {                            name: '2-2',                            y: 2,                            drilldown: '2-2-'                        }                    ]                },                {                    id: '2-1-',                    colorByPoint: true,                    data: [                        {                            name: '2-1-1',                            y: 2                        },                        {                            name: '2-1-2',                            y: 4                        },                        {                            name: '2-1-3',                            y: 3                        },                        {                            name: '2-1-4',                            y: 1                        }                    ]                },                {                    id: '2-2-',                    data: [                        {                            name: '2-2-1',                            y: 5                        },                        {                            name: '2-2-2',                            y: 2                        }                    ],                    colorByPoint: true                },                {                    id: '3-',                    data: [                        {                            name: '3-1',                            y: 5                        },                        {                            name: '3-2',                            y: 2                        }                    ],                    colorByPoint: true                }            ]        }    });});

效果如图所示：
动态效果图

具体示例请参考：数据钻取示例

0 0