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. [Windows Powershell]-学习笔记（2）

    数学运算 我们可以把powershell当成一个计算器.如键入命令行那样输入数学表达式,回车,powershell会自动计算并把结果输出.常用的加减乘除模(+,-,*,/,%)运算和小括号表达式都支持 ...

  2. XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem A. Arithmetic Derivative

    题目:Problem A. Arithmetic DerivativeInput file: standard inputOutput file: standard inputTime limit: ...

  3. ACM对拍程序

    1.把所需对拍的代码的可执行文件a.exe b.exe放在同一目录下 2.把rand数据的代码的可执行文件c.exe放在该目录下 3.新建一个txt文件,里面添加代码,后把格式改成bat @echo ...

  4. [转]madwifi无线网卡源代码阅读

    转自:http://xiyong8260.blog.163.com/blog/static/66514621200892465922669/ 在我的Doctor课题研究中,基于ARF协议设计了一个改进 ...

  5. sgu 101 Domino 解题报告及测试数据

    101. Domino time limit per test: 0.25 sec. memory limit per test: 4096 KB 题解: 求多米诺骨牌按照一定方式放置能否使相邻的位置 ...

  6. spark[源码]-sparkContext概述

    SparkContext概述 sparkContext是所有的spark应用程序的发动机引擎,就是说你想要运行spark程序就必须创建一个,不然就没的玩了.sparkContext负责初始化很多东西, ...

  7. 并发队列ConcurrentLinkedQueue与阻塞队列LinkedBlockingQueue的区别

    1.  介绍背景 在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列. Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是Block ...

  8. ARKit 研究笔记一

    软件需求:Xcode9.x .blender 硬件需求:iphone 6s + 系统:iOS 11 + 技能储备: ARKit .SceneKit(苹果提供的3d游戏库) 或 SpriteKit(苹果 ...

  9. elasticsearch搜索集群基础架构

    1.  elasticsearch cluster搭建 http://www.cnblogs.com/kisf/p/7326980.html   为了配套spring boot,elasticsear ...

  10. 20145328 《Java程序设计》实验一实验报告

    20145328 <Java程序设计>实验一实验报告 实验名称 Java开发环境的熟悉(Windows + IDEA) 实验内容 使用JDK编译.运行简单的Java程序: 使用IDEA 编 ...