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. session和token的区别

    session的使用方式是客户端cookie里存id,服务端session存用户数据,客户端访问服务端的时候,根据id找用户数据 而token一般翻译成令牌,一般是用于验证表明身份的数据或是别的口令数 ...

  2. Mysql Having的用法：对group by之后的分组加限制条件（复制）

    在使用聚合函数之前,我们可以通过where对查询加限制条件,那么如果在group by之后我们要对分组里面的数据再加限制条件怎么办呢?答案是having. HAVING子句可以让我们筛选成组后的各组数 ...

  3. Hive的metastore

    hive --service metastore 默认端口是9083 <property> <name>hive.metastore.uris</name> < ...

  4. unity手势插件《FingerGestures 》使用入门

    什么是FingerGestures? FingerGestures是Unity上,非常热门的一款用于处理用户输入的插件 为什么要使用FingerGestures? 1:它统一了鼠标点击和用户触摸的输入 ...

  5. Akka in action （第一章 介绍Akka）

    在本章 概述Akka 了解Actors和Actor系统 Akka的适用范围 在第一章中,会介绍给你Akk的个方面,它能做什么,与现有的解决方案有那些不同.重点关注Akka有哪些功能和使用范围和强大的并 ...

  6. eclipse 创建jsp报错

  7. AB测试的需求

    一.背景 涉及到的项目是 SDK, 用户量 几千万级别,需要调整的是 订单购买整个逻辑,已经发现了低概率问题,影响到的订单不到 0.001% ,但是每周总有几个用户向客服反馈问题.整个逻辑问题,在我入 ...

  8. U盘在制作Ubuntu启动盘后Windows系统下显示空间不对的解决办法（Ubuntu系统下格式化U盘的方法）

    用Ubuntu系统自带的启动盘制作工具后,将U盘拿到Windows系统下使用显示出的空间与U盘大小不同. 解决该问题的办法: 使用Linux终端: 第一步:sudo fdisk -l 这个命令主要是查 ...

  9. CMake入门教程(转帖)

    本文转自:https://www.cnblogs.com/never--more/p/6921837.html CMake入门教程 参考文献:http://www.ibm.com/developerw ...

  10. ViewResolver和ResponseBody笔记

    处理HttpResponseBody有两种方式,ViewResolver(视图解析器)和ResponseBody ViewResolver.View多用于jsp,ViewResolver的主要作用是把 ...