使用HighChart进行多级钻取

最新推荐文章于 2024-08-14 20:00:00 发布

有态度的Coder

最新推荐文章于 2024-08-14 20:00:00 发布

阅读量2k

点赞数 1

分类专栏： HighChart 数据钻取文章标签： HighChart 数据钻取

本文链接：https://blog.csdn.net/suqingheangle/article/details/54580474

版权

本文介绍了如何利用HighChart工具进行多级数据钻取，提供了三级钻取的代码示例，并展示了最终效果。通过HighChart的高级功能，可以实现更丰富的图表交互体验。

摘要由CSDN通过智能技术生成

　　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,