Highcharts 向下钻取饼图

配置

drilldown 配置

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

  1. drilldown: {
  2.    series: drilldownSeries
  3. }

实例

文件名：highcharts_pie_drilldown.htm

  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
  5. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  6. <script src="http://code.highcharts.com/highcharts.js"></script>
  7. <script src="http://code.highcharts.com/modules/drilldown.js"></script>
  8. <script src="http://code.highcharts.com/modules/data.js"></script>
  9. </head>
  10. <body>
  11. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  12. <script language="JavaScript">
  13. $(document).ready(function() { 
  14.  
  15.    Highcharts.data({
  16.       csv: document.getElementById('tsv').innerHTML,
  17.       itemDelimiter: '\t',
  18.       parsed: function (columns) {
  19.          var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];
  20.  
  21.          // Parse percentage strings
  22.          columns[1] = $.map(columns[1], function (value) {
  23.             if (value.indexOf('%') === value.length - 1) {
  24.                value = parseFloat(value);
  25.             }
  26.             return value;
  27.          });
  28.  
  29.          $.each(columns[0], function (i, name) {
  30.             var brand, version;
  31.  
  32.             if (i > 0) {
  33.  
  34.                // Remove special edition notes
  35.                name = name.split(' -')[0];
  36.  
  37.                // Split into brand and version
  38.                version = name.match(/([0-9]+[\.0-9x]*)/);
  39.                if (version) {
  40.                   version = version[0];
  41.                }
  42.                brand = name.replace(version, '');
  43.  
  44.                // Create the main data
  45.                if (!brands[brand]) {
  46.                   brands[brand] = columns[1][i];
  47.                } else {
  48.                   brands[brand] += columns[1][i];
  49.                }
  50.  
  51.                // Create the version data
  52.                if (version !== null) {
  53.                   if (!versions[brand]) {
  54.                      versions[brand] = [];
  55.                   }
  56.                   versions[brand].push(['v' + version, columns[1][i]]);
  57.                }
  58.             }
  59.  
  60.          });
  61.  
  62.          $.each(brands, function (name, y) {
  63.             brandsData.push({
  64.                name: name,
  65.                y: y,
  66.                drilldown: versions[name] ? name : null
  67.             });
  68.          });
  69.          $.each(versions, function (key, value) {
  70.             drilldownSeries.push({
  71.                 name: key,
  72.                 id: key,
  73.                 data: value
  74.             });
  75.          }); 
  76.  
  77.          var chart = {
  78.             type: 'pie'
  79.          };
  80.          var title = {
  81.             text: 'Browser market shares. November, 2013'
  82.          };
  83.          var subtitle = {
  84.             text: 'Click the slices to view versions. Source: netmarketshare.com.'
  85.          };
  86.          var xAxis = {
  87.             type:'category'};var yAxis ={
  88.             title:{
  89.               text:'Total percent market share'}};var tooltip ={
  90.             headerFormat:'<span style="font-size:11px">{series.name}</span><br>',
  91.             pointFormat:'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'};var credits ={
  92.             enabled:false};var series=[{
  93.             name:'Brands',
  94.             colorByPoint:true,
  95.             data: brandsData
  96.          }];var drilldown={
  97.             series: drilldownSeries
  98.          }var json ={};
  99.          json.chart = chart;
  100.          json.title = title;
  101.          json.subtitle = subtitle;
  102.          json.xAxis = xAxis;
  103.          json.yAxis = yAxis;
  104.          json.tooltip = tooltip;
  105.          json.credits = credits;
  106.          json.series = series;
  107.          json.drilldown = drilldown;
  108.          $('#container').highcharts(json);}});});</script><!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. --><preid="tsv"style="display:none">
  109. Browser Version    Total Market Share
  110. Microsoft Internet Explorer 8.0    26.61%
  111. Microsoft Internet Explorer 9.0    16.96%
  112. Chrome 18.0    8.01%
  113. Chrome 19.0    7.73%
  114. Firefox 12    6.72%
  115. Microsoft Internet Explorer 6.0    6.40%
  116. Firefox 11    4.72%
  117. Microsoft Internet Explorer 7.0    3.55%
  118. Safari 5.1    3.53%
  119. Firefox 13    2.16%
  120. Firefox 3.6    1.87%
  121. Opera 11.x    1.30%
  122. Chrome 17.0    1.13%
  123. Firefox 10    0.90%
  124. Safari 5.0    0.85%
  125. Firefox 9.0    0.65%
  126. Firefox 8.0    0.55%
  127. Firefox 4.0    0.50%
  128. Chrome 16.0    0.45%
  129. Firefox 3.0    0.36%
  130. Firefox 3.5    0.36%
  131. Firefox 6.0    0.32%
  132. Firefox 5.0    0.31%
  133. Firefox 7.0    0.29%
  134. Proprietary or Undetectable    0.29%
  135. Chrome 18.0 - Maxthon Edition    0.26%
  136. Chrome 14.0    0.25%
  137. Chrome 20.0    0.24%
  138. Chrome 15.0    0.18%
  139. Chrome 12.0    0.16%
  140. Opera 12.x    0.15%
  141. Safari 4.0    0.14%
  142. Chrome 13.0    0.13%
  143. Safari 4.1    0.12%
  144. Chrome 11.0    0.10%
  145. Firefox 14    0.10%
  146. Firefox 2.0    0.09%
  147. Chrome 10.0    0.09%
  148. Opera 10.x    0.09%
  149. 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. Creating an AVI in memory with C++

    Creating an AVI in memory with C++        The following example demonstrates how an avi file is comp ...

  2. centos7命令1

    ls  查看当前路径下的文件或文件夹 pwd 查看当前路径,例如/home/python   表示根目录下的home文件夹下的python文件夹 clear清空屏幕 /斜杠 \反斜杠 |竖杠 _下划线 ...

  3. zabbix 4.0 安装配置

    1.安装软件包: 1.安装软件包: yum install -y httpd mariadb-server mariadb php php-mysql php-gd libjpeg* php-ldap ...

  4. java.sql.SQLException: Streaming result set com.mysql.jdbc.RowDataDynamic@27ce24aa is still active. No statements may be issued when any streaming result sets are open and in use on a given connection

    在Sqoop往mysql导出数据的时候报了这个错误,一开始还以为是jar包没有打进去或者打错位置了,未解便上网查询. Error reading from database: java.sql.SQL ...

  5. 跨域问题-nginx代理

    有时候我们跨域是借助了浏览器对 Access-Control-Allow-Origin 的支持.但有些浏览器是不支持的,所以这并非是最佳方案现在我们来利用nginx 通过反向代理 满足浏览器的同源策略 ...

  6. 【源码分享】仿网易客户端源码效果 apkbus的~

    http://www.apkbus.com/forum.php?mod=viewthread&tid=184867 内容我就不说了,直接点开看吧.

  7. Linux下编程学习一

    本篇主要记录一些在学习LINUX下编程时,, C和C++语言的一些基础的常识, 一. 函数指针 void MyFun(int x); 函数声明 void (*FunP)(int ); 函数指针声明 下 ...

  8. PCLK怎么获得？

    1.PCLK是由MCLK进行分频而来...... 2.PCLK是个时钟,通过寄存器只能调节它的频率什么的,它是控制像素输出的一个时钟: 3.在曝光时间的算法中需要知道PCLK的值,是因为在sensor ...

  9. Linux学习笔记之Linux修改或增加ssh端口

    1.什么是SSH SSH 为 Secure Shell 由 IETF 的网络工作小组(Network Working Group)所制定: SSH 是建立在应用层和传输层基础上的一种安全协议. SSH ...

  10. 屏幕变黑白-winhotkey

    下载了个windows hot key 的工具想看快捷键冲突 结果安装好之后屏幕变黑白了,变成辅助模式了.而且鼠标移动到哪都加蓝色框框  如果这个时候你带上耳机就能听到在朗读,这应该也是一种辅助模式 ...