`
08284008
  • 浏览: 51482 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

highchart drilldown钻取

 
阅读更多

 三级钻取示例:参看了http://www.cnblogs.com/linn/p/4194288.html这里的文章。

效果查看可以将以下代码,在https://code.hcharts.cn/demos/hhhhDs在线编辑示例里试试。

$(function () {
    // Create the chart
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: '2015年1月-5月,各浏览器的市场份额'
        },
        subtitle: {
            text: '点击可查看具体的版本数据,数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: '总的市场份额'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: '浏览器品牌',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer',
                y: 56.33,
                drilldown: 'Microsoft Internet Explorer'
            }, {
                name: 'Chrome',
                y: 24.03,
                drilldown: 'Chrome'
            }, {
                name: 'Firefox',
                y: 10.38,
                drilldown: 'Firefox'
            }, {
                name: 'Safari',
                y: 4.77,
                drilldown: 'Safari'
            }, {
                name: 'Opera',
                y: 0.91,
                drilldown: 'Opera'
            }, {
                name: 'Proprietary or Undetectable',
                y: 0.2,
                drilldown: null
            }]
        }],
        drilldown: {
            series: [{
                name: 'Microsoft Internet Explorer',
                id: 'Microsoft Internet Explorer',
                data: [
                    {
                        name:'v11',
                        y:24.13,
                        drilldown: 'v11'
                    },
                    {
                        name:'v8.0',
                        y:17.2
                    },
                    {
                        name:'v9.0',
                        y:8.11
                    },
                    {
                        name:'v10.0',
                        y:5.33
                    },
                    {
                        name:'v6.0',
                        y:1.06
                    },
                    {
                        name:'v7.0',
                        y:0.5
                    }
                ]
            }, {
                name: 'Chrome',
                id: 'Chrome',
                data: [
                    [
                        'v40.0',
                        5
                    ],
                    [
                        'v41.0',
                        4.32
                    ],
                    [
                        'v42.0',
                        3.68
                    ],
                    [
                        'v39.0',
                        2.96
                    ],
                    [
                        'v36.0',
                        2.53
                    ],
                    [
                        'v43.0',
                        1.45
                    ],
                    [
                        'v31.0',
                        1.24
                    ],
                    [
                        'v35.0',
                        0.85
                    ],
                    [
                        'v38.0',
                        0.6
                    ],
                    [
                        'v32.0',
                        0.55
                    ],
                    [
                        'v37.0',
                        0.38
                    ],
                    [
                        'v33.0',
                        0.19
                    ],
                    [
                        'v34.0',
                        0.14
                    ],
                    [
                        'v30.0',
                        0.14
                    ]
                ]
            }, {
                name: 'Firefox',
                id: 'Firefox',
                data: [
                    [
                        'v35',
                        2.76
                    ],
                    [
                        'v36',
                        2.32
                    ],
                    [
                        'v37',
                        2.31
                    ],
                    [
                        'v34',
                        1.27
                    ],
                    [
                        'v38',
                        1.02
                    ],
                    [
                        'v31',
                        0.33
                    ],
                    [
                        'v33',
                        0.22
                    ],
                    [
                        'v32',
                        0.15
                    ]
                ]
            }, {
                name: 'Safari',
                id: 'Safari',
                data: [
                    [
                        'v8.0',
                        2.56
                    ],
                    [
                        'v7.1',
                        0.77
                    ],
                    [
                        'v5.1',
                        0.42
                    ],
                    [
                        'v5.0',
                        0.3
                    ],
                    [
                        'v6.1',
                        0.29
                    ],
                    [
                        'v7.0',
                        0.26
                    ],
                    [
                        'v6.2',
                        0.17
                    ]
                ]
            }, {
                name: 'Opera',
                id: 'Opera',
                data: [
                    [
                        'v12.x',
                        0.34
                    ],
                    [
                        'v28',
                        0.24
                    ],
                    [
                        'v27',
                        0.17
                    ],
                    [
                        'v29',
                        0.16
                    ]
                ]
            },{ 
                name:"v11",
                id:"v11",
                data:[
                    [
                        'v27',
                        0.17
                    ],
                    [
                        'v29',
                        0.16
                    ]
                ]
            }],
            // drilldown:{
            //     series:[{
            //         name:"v11",
            //         id:"v11",
            //         data:[
            //             [
            //                 'v27',
            //                 0.17
            //             ],
            //             [
            //                 'v29',
            //                 0.16
            //             ]
            //         ]
            //     }]
            // }
        }
    });
});

 

分享到:
评论

相关推荐

    matlab开发-HighChart

    在本项目"matlab开发-HighChart"中,我们将重点探讨如何利用MATLAB与HighChart结合,创建动态和交互式的图表。HighChart是一个强大的JavaScript库,用于构建高质量的网页图表,其在数据可视化方面表现卓越,尤其适用...

    HighChart

    此外,HighChart还提供了强大的交互功能,如点击事件、数据钻取、数据区域缩放等,使用户能够更深入地探索数据。 在实际项目中,HighChart通常与后端服务配合,通过Ajax异步获取数据,动态更新图表。这样,当数据...

    HighChart API

    HighChart API 是一款强大的JavaScript图表库,用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能,使得开发者可以定制各种类型的图表,如柱状图、折线图、饼图、散点图等。下面将详细...

    HighChart曲线图

    HighChart是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,包括曲线图。在Web开发中,数据可视化是至关重要的,HighChart凭借其丰富的功能和易用性,深受开发者喜爱。以下是对"HighChart曲线图...

    引用:highChart控件不错,挺漂亮

    HighChart是一款广泛应用于Web开发中的数据可视化库,它以其丰富的图表类型、良好的交互性和美观的样式赢得了开发者们的喜爱。在本文中,我们将深入探讨HighChart控件的核心特性、使用方法以及如何结合源码进行定制...

    highchart

    高charts社区提供了大量插件,如Highcharts Export Server用于服务器端导出,或Drilldown模块实现逐层深入的数据探索。 13. **与其他库集成**: Highcharts可以轻松地与jQuery、AngularJS、React等前端框架集成,...

    Highchart Demo

    在"Highchart Demo"这个实例中,我们将深入探讨如何利用Highcharts来制作各种类型的图表,以及相关的JavaScript配置和数据接收格式。 首先,Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图等...

    highchart中文帮助文档

    ### Highcharts中文帮助文档知识点详解 #### Chart图表区选项 Highcharts是一款强大的JavaScript图表库,其图表区选项允许用户精细调整图表的外观和行为。以下是一些关键的配置项: - **backgroundColor**: 设置...

    highchart源码及实例

    Highcharts提供了一些可选模块,如 exporting(导出图表)、drilldown(下钻)和map(地图)等,通过引入相应模块的JS文件并配置即可启用。 八、Highcharts与其他库的集成 Highcharts可以与jQuery、AngularJS、...

    highchart源码

    highchart源码

    bootstrap+EasyUI+highchart中文参考手册

    bootstrap+EasyUI+highchart中文参考手册,本人是后端开发,对前端不是很熟悉,所以在做项目的时候采用了这三个技术,因为是框架所以用起来开发前端很方便,果断选择,后端程序员也能开发出漂亮的前端页面了

    highchart的例子

    highchart的一个例子

    highchart 3 离线 API 完整版

    "Highchart 3 离线 API 完整版"是Highcharts的第三个主要版本的离线文档和资源包,它包含了所有关于Highcharts 3的API接口、方法、配置选项以及示例代码,方便开发者在无网络环境下查阅和学习。 在Highcharts 3中,...

    highchart(api)

    这个压缩包文件的标题“highchart(api)”显然与Highcharts的API使用有关,可能包含了一些关于如何利用Highcharts API来绘制图表的示例或教程。 Highcharts的核心功能包括折线图、柱状图、饼图、散点图等多种图表...

    HighChart 3.0.2 Demo+API

    HighChart是一款基于JavaScript的开源图表库,用于在Web应用程序中创建高质量、互动式的图表。它在数据可视化领域具有广泛的应用,尤其在Web开发中深受喜爱。3.0.2是HighChart的一个版本,该版本提供了丰富的图表...

    highchart c# demo

    这个"highchart c# demo"示例将指导我们如何在C#后端生成数据,并通过JavaScript在前端展示。 首先,我们需要理解Highcharts的基本结构。Highcharts的核心是HTML5 `&lt;div&gt;`标签,我们在这个标签内插入JavaScript代码...

    highchart.rar

    在这个名为"highchart.rar"的压缩包中,我们很显然会找到与Highcharts相关的代码示例,尤其是关于如何实现Y轴双数据的设置。 在Web开发中,数据可视化是一个至关重要的环节,它能够帮助用户更好地理解复杂的数据...

Global site tag (gtag.js) - Google Analytics