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. Mac OS OpenVpN 连接设置(转)

    下文介绍Mac OS连接使用OpenVPN方法教程,使用的软件是免费开源的Tunnelblick,当然也有其它连接软件,比如Viscosity,不过这个是付费的,还是前面的用的多. 1.下载安装Tun ...

  2. 131. Palindrome Partitioning(回文子串划分 深度优先)

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  3. codeforces 70 D. Professor's task 动态凸包

    地址:http://codeforces.com/problemset/problem/70/D 题目: D. Professor's task time limit per test 1 secon ...

  4. Web.xml中自动扫描Spring的配置文件及resource时classpath*:与classpath:的区别

    Web.xml中自动扫描Spring的配置文件及resource时classpath*:与classpath:的区别 一.Web.xml中自动扫描Spring的配置文件(applicationCont ...

  5. 一键安装lnmp（1）

    #!/bin/bash#author:zhaocl#Software directory:$pathpath=`pwd`cd $path. $path/cacti.sh. $path/nginx.sh ...

  6. 自制mysql的rpm包

    MySQL安装一般使用RPM或者源码安装的方式.RPM安装的优点是快速,方便.缺点是不能自定义安装目录.如果需要调整数据文件和日志文件的存放位置,还需要进行一些手动调整.源码安装的优点是可以自定义安装 ...

  7. 安装centos7最小化安装

    分享一篇不错的文章: https://www.howtoforge.com/tutorial/centos-7-server/

  8. Ubuntu 18.04配置机场客户端

    最近把自己的笔记本电脑安装成ubuntu18.04操作系统,为了更方便的查找文档,所以需要配置一下机场(v2ray)的客户端方便查找资料,以下是配置步骤: 1.下载并执行一键脚本: bash < ...

  9. 三20135320赵瀚青LINUX内核分析第二周学习笔记

    赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.计算机的三个法宝 存储程 ...

  10. yield生成器函数

    生成器有主要有四种方法: next() 执行函数,直到遇到下一个yield为止,并返回值 send(value) 为生成器发送一个数值,next()方法就相当于send(None) close() 终 ...