Highcharts 向下钻取饼图

配置

drilldown 配置

drilldown 用于向下钻取数据，通过点击某项深入到其中的具体数据。

drilldown: {

   series: drilldownSeries

}

实例

文件名：highcharts_pie_drilldown.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<script src="http://code.highcharts.com/modules/data.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() { 

   Highcharts.data({

      csv: document.getElementById('tsv').innerHTML,

      itemDelimiter: '\t',

      parsed: function (columns) {

         var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];

         // Parse percentage strings

         columns[1] = $.map(columns[1], function (value) {

            if (value.indexOf('%') === value.length - 1) {

               value = parseFloat(value);

            }

            return value;

         });

         $.each(columns[0], function (i, name) {

            var brand, version;

            if (i > 0) {

               // Remove special edition notes

               name = name.split(' -')[0];

               // Split into brand and version

               version = name.match(/([0-9]+[\.0-9x]*)/);

               if (version) {

                  version = version[0];

               }

               brand = name.replace(version, '');

               // Create the main data

               if (!brands[brand]) {

                  brands[brand] = columns[1][i];

               } else {

                  brands[brand] += columns[1][i];

               }

               // Create the version data

               if (version !== null) {

                  if (!versions[brand]) {

                     versions[brand] = [];

                  }

                  versions[brand].push(['v' + version, columns[1][i]]);

               }

            }

         });

         $.each(brands, function (name, y) {

            brandsData.push({

               name: name,

               y: y,

               drilldown: versions[name] ? name : null

            });

         });

         $.each(versions, function (key, value) {

            drilldownSeries.push({

                name: key,

                id: key,

                data: value

            });

         }); 

         var chart = {

            type: 'pie'

         };

         var title = {

            text: 'Browser market shares. November, 2013'

         };

         var subtitle = {

            text: 'Click the slices to view versions. Source: netmarketshare.com.'

         };

         var xAxis = {

            type:'category'};var yAxis ={

            title:{

              text:'Total percent market share'}};var 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/>'};var credits ={

            enabled:false};var series=[{

            name:'Brands',

            colorByPoint:true,

            data: brandsData

         }];var drilldown={

            series: drilldownSeries

         }var json ={};

         json.chart = chart;

         json.title = title;

         json.subtitle = subtitle;

         json.xAxis = xAxis;

         json.yAxis = yAxis;

         json.tooltip = tooltip;

         json.credits = credits;

         json.series = series;

         json.drilldown = drilldown;

         $('#container').highcharts(json);}});});</script><!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. --><preid="tsv"style="display:none">

Browser Version    Total Market Share

Microsoft Internet Explorer 8.0    26.61%

Microsoft Internet Explorer 9.0    16.96%

Chrome 18.0    8.01%

Chrome 19.0    7.73%

Firefox 12    6.72%

Microsoft Internet Explorer 6.0    6.40%

Firefox 11    4.72%

Microsoft Internet Explorer 7.0    3.55%

Safari 5.1    3.53%

Firefox 13    2.16%

Firefox 3.6    1.87%

Opera 11.x    1.30%

Chrome 17.0    1.13%

Firefox 10    0.90%

Safari 5.0    0.85%

Firefox 9.0    0.65%

Firefox 8.0    0.55%

Firefox 4.0    0.50%

Chrome 16.0    0.45%

Firefox 3.0    0.36%

Firefox 3.5    0.36%

Firefox 6.0    0.32%

Firefox 5.0    0.31%

Firefox 7.0    0.29%

Proprietary or Undetectable    0.29%

Chrome 18.0 - Maxthon Edition    0.26%

Chrome 14.0    0.25%

Chrome 20.0    0.24%

Chrome 15.0    0.18%

Chrome 12.0    0.16%

Opera 12.x    0.15%

Safari 4.0    0.14%

Chrome 13.0    0.13%

Safari 4.1    0.12%

Chrome 11.0    0.10%

Firefox 14    0.10%

Firefox 2.0    0.09%

Chrome 10.0    0.09%

Opera 10.x    0.09%

Microsoft Internet Explorer 8.0 - Tencent Traveler Edition    0.09%

尝试一下 »

以上实例输出结果为：

 
 
 
 
 
 

Highcharts 向下钻取饼图的更多相关文章

  1. [原创]Devexpress XtraReports 系列 7 创建Drill-Down(向下钻取)报表

    昨天发表了Devexpress XtraReports系列第六篇[原创]Devexpress XtraReports 系列 6 创建并排报表,今天我们继续. 今天的主题是创建Drill-Down报表. ...

  2. ActiveReports 交互式报表之向下钻取解决方案

    在 ActiveReports 中可以动态的显示或者隐藏某区域的数据,通过该功能用户可以根据需要显示或者隐藏所关心的数据,结合数据排序.过滤等功能可以让用户更方便地分析报表数据. 本文中展示的是销售数 ...

  3. HighCharts之2D对数饼图

    HighCharts之2D对数饼图 1.实例源码 LogarithmicPie.html: <!DOCTYPE html> <html> <head> <me ...

  4. ActiveReports 报表应用教程 (10)---交互式报表之向下钻取（详细数据按需显示解决方案）

    在葡萄城ActiveReports报表中可以动态的显示或者隐藏某区域的数据,通过该功能用户可以根据需要显示或者隐藏所关心的数据,结合数据排序.过滤等功能可以让用户更方便地分析报表数据. 本文中展示的是 ...

  5. DWR(AJAX)+Highcharts绘制曲线图，饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...

  6. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

  7. HighCharts之2D颜色阶梯饼图

    HighCharts之2D颜色阶梯饼图 1.实例源码 PieGradient.html: <!DOCTYPE html> <html> <head> <met ...

  8. highcharts 图表库的简单使用

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

  9. Highcharts中文网

    官网地址: http://www.hcharts.cn/ http://www.hcharts.cn/p/highchartTable.php 名词解释 英文名  中文名 描述  更多 lang 语言 ...

随机推荐

  1. vim设置tab键默认为4个空格

    有两种方法 1.vim /etc/vimrc set ts=4 set sw=4 2.vim /etc/vimrc set ts=4 set expandtab set autoindent 推荐使用 ...

  2. 2.MySQL简介

    MySQL是一种DBMS,即它是一种数据库软件.   1.连接   为了连接到MyAQL,需要一下信息: ➡️主机名(计算机名)---如果连接到本地MySQL服务器,为localhost ➡️duan ...

  3. spl_autoload_register(转载 http://blog.csdn.net/panpan639944806/article/details/23192267)

    在了解这个函数之前先来看另一个函数:__autoload. 一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: printit.c ...

  4. Codeforces Round #425 (Div. 2) B - Petya and Exam

    地址:http://codeforces.com/contest/832/problem/B 题目: B. Petya and Exam time limit per test 2 seconds m ...

  5. [2012-12-18 14:59:31]AS3 常用正则表达式的总结-不用google了，我帮收集的很多了

    正则表达式是一种通用的标准,大部分计算机语言都支持正则表达式,包括as3,这里转摘出了一些常用的正则表达式语句,大家用到的时候就不用自己写了.红色字体为常用正则:下面这个类是我自己写的一个示例,想必大 ...

  6. Ubuntu中安装Flask模块

    pip3 list——python3下安装的***** #如果列表没有flask pip3 install flask即可

  7. 前端学习笔记之BOM和DOM

    前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  8. 20145302张薇《Java程序设计》第五周学习总结

    20145302 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 try catch JVM会先尝试执行try区块中的内容,若发生错误且与catch后面的类型相符,则执行ca ...

  9. 20145328 《Java程序设计》第5周学习总结

    20145328 <Java程序设计>第5周学习总结 教材学习内容总结 语法和继承架构 异常处理关键字 第八章内容主要是对Java的异常处理 Java的异常处理是通过5个关键字来实现的:t ...

  10. Jenkins FreeStyle or Pipeline Job

    FreeStyle Job: 1. 需要在页面添加模块配置项与参数完成配置 2. 每个Job仅能实现一个开发功能 3. 无法将配置代码化,不利于Job配置迁移与版本控制 4. 逻辑相对简单,无额外学习 ...