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. 如何在VC6.0下用pthread.h这个头文件

    如何在VC6.0下用pthread.h这个头文件   1.下载PTHREAD的WINDOWS开发包 pthreads-w32-2-4-0-release.exe(任何一个版本均可) http://so ...

  2. android 弹出带按钮的对话框

    package com.example.helloworld; import android.os.Bundle;import android.app.Activity;import android. ...

  3. DOS命令安装配置Apache + MySQL + PHP 开发环境 （VC11）

    一.下载 1.下载Apache 下载地址:https://www.apachelounge.com/download/VC11/ 2.下载MySQL 下载地址:http://dev.mysql.com ...

  4. 字典的fromkeys的用法

    fromkeys方法语法 dict.fromkeys(iterable[,value=None]) iterable 用于创建新的字典的键的可迭代对象(字符串,列表,元组,字典) value 可选参数 ...

  5. 斩获新知——记一次reverse的实现过程

    最近学习C++,在实现reverse模板函数的时候,从一个小问题开始,在对这个问题的旁敲侧击当中带起了更多疑惑,顺藤摸瓜之后,尽管没有将诸多问题完美解答,但整个过程下来却也似有所获.最初的问题从使用C ...

  6. web.xml中配置spring配置(application.xml)文件

    application.xml 一般放到WEB-INF下,当然,你也可以将它放到任意问题,但需要web.xml指向到该文件 1.application.xml配置 <?xml version=& ...

  7. Redhat 7.4更新为Centos7的yum并安装docker-ce

    以下命令请在root下执行 #删除原有的yum rpm -qa|grep yum|xargs rpm -e --nodeps #install centos yum #wget http://mirr ...

  8. Docker+.Net Core 的那些事儿-1.准备工作

    1.下载centos 地址:https://www.centos.org/download/ 我使用的是DVD ISO,这么做的目的是为了在之后的docker填坑的路上,方便使用centos中Fire ...

  9. 利用Masscan批量生成随机ip地址表

    简介 Masscan是Kali下集成的高效扫描器,和nmap命令有很多相似之处 命令生成随机ip masscan -sL 10.0.0.0/24 > c段.txt masscan -sL 10. ...

  10. java反射 - getXXX 与 getDeclaredXXX

    1.getXXX 和 getDeclaredXXX java 里 Class<?> 有下面这些方法: 类似的方法有: 2.getMethod(s) 和 getDeclaredMethod( ...