<!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. eclipse中修改工程的Android版本

    项目根目录下project.properties的记录项目中所需要的环境信息,比如Android的版本等 project.properties示例如下: [html] view plaincopy # ...

  2. PowerShell 在hyper-v中创建虚拟机

    # This script configures the Hyper-V machines used for the 50331 Course. # PowerShell 3.0 and Window ...

  3. H5测试

    H5是什么? H5的全称是HTML5,其实就是:移动端WEB页面. H5与原生 APP的区别: APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定. H5的APP先得 ...

  4. 在Hive中使用Avro

    作者:过往记忆 | 新浪微博:左手牵右手TEL | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明博客地址:http://www.iteblog.com/文章标题:<在Hiv ...

  5. 使用MouseWithoutBordersSetup共享鼠标键盘教程

    1.下载MouseWithoutBordersSetup软件 2.需要共享鼠标键盘的电脑都要安装[注:这些电脑在同一个局域网] 3.运行软件后,图标上右键—>Settings 注意大红框的地方, ...

  6. javaBean和mvc思想

    JavaBean,  咖啡豆. JavaBean是一种开发规范,可以说是一种技术. JavaBean就是一个普通的java类.只有符合以下规定才能称之为javabean: 1)必须提供无参数的构造方法 ...

  7. 2017年--10年java大神告诉你开发最常用的百分之二十的技术有哪些？

    首先题主说的20%我不知道从哪方面去理解.接下来我会将自己多年来工作中会经常使用到的技术列出来. 1.html.css 2.java工作原理(jvm) 3.java语法.数据结构和算法 4.java语 ...

  8. touch-action属性

    CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动.缩放等). /* Keyword values */touch-action: ...

  9. 自己搭建MVC时遇到的一些问题及解决办法

    错误1 The view 'Index' or its master was not found or no view engine supports the searched locations. ...

  10. 9.9 Python 文档字符串

    9.9 Python 文档字符串. 进入 Python 标准库所在的目录. 检查每个 .py 文件看是否有__doc__ 字符串, 如果有, 对其格式进行适当的整理归类. 你的程序执行完毕后, 应该会 ...