<!doctype html>

<html lang="en">

<head>

  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>

  <script>

    highcharts三层钻取

  </script>

</head>

    <body>

<div id="container" style="margin: 0 auto"></div>

<script>

    $(function () {

    // Create the chart

    $('#container').highcharts({

        chart: {

            type: 'column'

            // type: 'line'

        },

        title: {

            text: '当季新品总收入（元）-- 点击钻取'

        },

        xAxis: {

            type: 'category'

        },

        legend: {

            enabled: false

        },

        plotOptions: {

            series: {

                borderWidth: 0,

                dataLabels: {

                    enabled: true

                }

            }

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        series: [ {

            name: '测试2',

            type: 'line',

            data: [

                {y:3.9,drilldown: 'animals'},

                 {y:4.9,drilldown: 'animals'},],

            drilldown: 'fruits'

        }],

        /*

        series: [{

            name: 'Things',

            colorByPoint: true,

            data: [{

                name: 'Animals',

                y: 5,

                drilldown: 'animals'

            }, {

                name: 'Fruits',

                y: 2,

                drilldown: 'fruits'

            }, {

                name: 'Cars',

                y: 4,

                drilldown: 'cars'

            }]

        }],

        */

        drilldown: {

            series: [{

                id: 'animals',

                data: [{

                    name: 'Animals2',

                    y: 5,

                    drilldown: 'cars'

                }, {

                    name: 'Fruits2',

                    y: 2,

                    drilldown: 'cars'

                }]

            }, {

                id: 'fruits',

                data: [

                    ['Apples', 4],

                    ['Oranges', 2]

                ],

                drilldown: 'cars'

            }, {

                id: 'cars',

                data: [

                    ['Toyota', 4],

                    ['Opel', 2],

                    ['Volkswagen', 2]

                ]

            }]

        }

    });

});

</script>

</body>

</html>

highcharts钻取例子的更多相关文章

  1. HighCharts -教程+例子

    Highchart简介:   Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,  Highcharts目前支持直线图 ...

  2. android highcharts 柱状图例子

    android提供achartengine api 只能做简单的,如果是复杂的图表,个人的想法结合highcharts来完成:减小工作量,官方提供的例子也非常丰富. 通过android webview ...

  3. 一个Highcharts的例子

    关键字:Highcharts <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...

  4. 【HighCharts系列教程】一、认识Highcharts

    一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...

  5. hightcharts 3d 堆积图下钻

    图片效果 ***************代码部分****************************************************** <!doctype html> ...

  6. Highcharts 向下钻取饼图

    Highcharts 向下钻取饼图 配置 drilldown 配置 drilldown 用于向下钻取数据,通过点击某项深入到其中的具体数据. drilldown: { series: drilldow ...

  7. 无聊写了一个最简单的MVC4+Highcharts连数据库例子

    乱搞了个数据库 后面发现没定INT类型 直接将ID当数据显示了 效果图: 前端 @{ Layout = null; } <!DOCTYPE html> <html> <h ...

  8. highcharts例子

    直接看代码 <script language="JavaScript"> $(document).ready(function() { $.ajax({ type:'p ...

  9. 解析大型.NET ERP系统 查找与钻取

    查找 Lookup 窗体是一个容器,也可以把TextBox,Button也看成是一个容器,可以往容器里面添加按钮. 参考下面的实现代码,给TextBox增加查找按钮. var btn = new Bu ...

随机推荐

  1. VMware 虚拟镜像转 Hyper-V（Win10/2016）

    VMware 虚拟镜像转 Hyper-V(Win10/2016) 参考:http://www.askme4tech.com/how-convert-vmware-virtual-machine-hyp ...

  2. XML的两种解析方式

    JDK提供的XML解析方式分为两种:DOM方式和SAX方式DOM:Document Object Model.需要读取整个XML文档,先需要在内存中构架代表整个DOM树的Document对象,可以进行 ...

  3. 【lightoj-1025】The Specials Menu（区间DP）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1025 [题目大意] 求一个字符串删去任意字符可以构成多少个不同的回文串 [分析 ...

  4. input type=file 怎么样调取用户手机照相机

    input 有个属性accept="image/*" 这样就可以了,同时在网上看到了其他答案,试了下没啥效果.写记录下来 如下: 使用input:file标签, 去调用系统默认相机 ...

  5. node 一站式 学习 教程

    还是比较全面的, 包括了 : monogoDB的安装 使用 , 各种插件, 中间件的介绍, 路由的介绍, 各种数据库框架的介绍, 测试介绍;  掌握后应该可以开发一个中型的程序, 大型程序因为有性能的 ...

  6. Flask--信号 blinker

    Flask--信号 blinker Flask框架中的信号基于blinker,可以让开发者在flask请求过程中 定制一些用户行为执行. 在请求前后,模板渲染前后,上下文前后,异常 的时候 安装: p ...

  7. Lua学习---编译生成lua和luac

    众所周知,Lua是一种强大的脚本语言,并且这种语言是用C语言实现的.为什么要学习这门语言?因为它可以增强我看C语言代码的功底. 我下的Lua版本是Lua5.3,关于Lua5.3的简介如下: http: ...

  8. Arcgis for Javascript之featureLayer图和属性的互操作

    说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果: 显示效果 如上图所示,本文章主要实现了以下几个功能:1.FeatureLayer属性表的分页 ...

  9. 苹果iOS11重磅改版App Store，开发者应该了解这些

    苹果在WWDC2017上重磅发布iOS11,其中一项重大更新就是对App Sore的全新改版,我们一起来看看具体有哪些变化,以及对我们会带来哪些影响. App Store的分类变化 在iOS10以前, ...

  10. 4.CRT远程连接的使用

    目录: 1.为什么需要远程连接? 2.一般的远程连接工具有哪些? 3.远程连接的原理? 4.远程连接的软件的功能和使用相关技巧? 1.为什么选择远程连接? 因为在实际工作中,机房一般都不可能在办公室, ...