highchart drilldown钻取
三级钻取示例:参看了http://www.cnblogs.com/linn/p/4194288.html这里的文章。
效果查看可以将以下代码,在https://code.hcharts.cn/demos/hhhhDs在线编辑示例里试试。
$(function () {// Create the chartHighcharts.chart('container', {chart: {type: 'column'},title: {text: '2015年1月-5月,各浏览器的市场份额'},subtitle: {text: '点击可查看具体的版本数据,数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.'},xAxis: {type: 'category'},yAxis: {title: {text: '总的市场份额'}},legend: {enabled: false},plotOptions: {series: {borderWidth: 0,dataLabels: {enabled: true,format: '{point.y:.1f}%'}}},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/>'},series: [{name: '浏览器品牌',colorByPoint: true,data: [{name: 'Microsoft Internet Explorer',y: 56.33,drilldown: 'Microsoft Internet Explorer'}, {name: 'Chrome',y: 24.03,drilldown: 'Chrome'}, {name: 'Firefox',y: 10.38,drilldown: 'Firefox'}, {name: 'Safari',y: 4.77,drilldown: 'Safari'}, {name: 'Opera',y: 0.91,drilldown: 'Opera'}, {name: 'Proprietary or Undetectable',y: 0.2,drilldown: null}]}],drilldown: {series: [{name: 'Microsoft Internet Explorer',id: 'Microsoft Internet Explorer',data: [{name:'v11',y:24.13,drilldown: 'v11'},{name:'v8.0',y:17.2},{name:'v9.0',y:8.11},{name:'v10.0',y:5.33},{name:'v6.0',y:1.06},{name:'v7.0',y:0.5}]}, {name: 'Chrome',id: 'Chrome',data: [['v40.0',5],['v41.0',4.32],['v42.0',3.68],['v39.0',2.96],['v36.0',2.53],['v43.0',1.45],['v31.0',1.24],['v35.0',0.85],['v38.0',0.6],['v32.0',0.55],['v37.0',0.38],['v33.0',0.19],['v34.0',0.14],['v30.0',0.14]]}, {name: 'Firefox',id: 'Firefox',data: [['v35',2.76],['v36',2.32],['v37',2.31],['v34',1.27],['v38',1.02],['v31',0.33],['v33',0.22],['v32',0.15]]}, {name: 'Safari',id: 'Safari',data: [['v8.0',2.56],['v7.1',0.77],['v5.1',0.42],['v5.0',0.3],['v6.1',0.29],['v7.0',0.26],['v6.2',0.17]]}, {name: 'Opera',id: 'Opera',data: [['v12.x',0.34],['v28',0.24],['v27',0.17],['v29',0.16]]},{ name:"v11",id:"v11",data:[['v27',0.17],['v29',0.16]]}],// drilldown:{// series:[{// name:"v11",// id:"v11",// data:[// [// 'v27',// 0.17// ],// [// 'v29',// 0.16// ]// ]// }]// }}}); });
highchart drilldown钻取相关推荐
- 武新博士:新型MPP数据库将支撑起大数据时代
大数据这个领域过去5年发展很快.热度很高,但是总的来说目前还在起步阶段.本次研讨会我会先谈谈数据,以及大数据对数据处理技术的压力,然后为大家分享一下为什么这几年数据处理技术上的创新很多. 1. 数据价 ...
- SQL/ORACLE_基础英语词汇
英文 中文 英语 美语 abstract 抽象的 'æbstrækt 'æbstrækt access 访问:存取 'æksɛs 'ækses account 账户 ə'kaunt ə'kaunt a ...
- java highchart统计图_java+highchart实现分类下钻柱形图
可视化展示中, 向下钻取的功能很常见. 这是有必要掌握的技能之一. 首先看官方示例. 第一层 点击第一个柱子向下钻取 实现这种图形展示, 关键点和难点在于数据格式的准备上. 通过查看示例代码, 可以看 ...
- ***S 2012 交互式报表 -- 钻取式报表
***S 2012 交互式报表 -- 钻取式报表 当分析者运用报表观察汇总数据时,当对某个数据感兴趣或是察觉异常时,往往需要调阅汇总值,以仔细深入分析.这种需求称之为钻取(Drill-Through) ...
- angular2集成highchart
集成highchart的配置困扰了我很久,今天终于解决了: 1.修改tsconfig.app.json: "compilerOptions": { //... "type ...
- 数据切片和切块 钻取 旋转
数据切片和切块 钻取 旋转 1 切片和切块(Slice and Dice) 在多维数据结构中,按二维进行切片,按三维进行切块,可得到所需要的数据.如在"贷 款银行.贷款质量.时间" ...
- eChart 中 柱状图、地图、AntDesign 的 滚动条表格、highChart 的 (venn) 韦恩图
一.echarts 的准备工作 1.下载依赖包 // 项目中下载 依赖 npm install echarts -s 2.引入配置 // 1. main.js 中引入 全局使用 (通过this.$ec ...
- OLAP中的统计分析:切片 切块 钻取 旋转
http://www.tsingsong.com/jforum/posts/list/754.page OLAP中的统计分析,比我们通常的所说的只计算一下最大最小平均总量这些报表统计要深刻一下,主要有 ...
- 切片、切块、钻取和旋转
1 切片和切块(Slice and Dice) 在多维数据结构中,按二维进行切片,按三维进行切块,可得到所需要的数据.如在"贷款银行.贷款质量.时间"三维立方体中进行切块和切片,可 ...
- 切片和切块 钻取 旋转(转)
1 切片和切块(Slice and Dice) 在多维数据结构中,按二维进行切片,按三维进行切块,可得到所需要的数据.如在"贷款银行.贷款质量.时间"三维立方体中进行切块和切片,可 ...
最新文章
- 程序员在外面看见bug会想修吗? | 每日趣闻
- U-Boot配置过程
- 1.记住密码 提示框
- mysql报196271错误_微软补丁造成MYSQL及Windows经常连接失败解决方法
- Pandas知识点-添加操作append
- 扩展欧几里得,解线性同余方程 逆元 poj1845
- hl3150cdn打印不了照片_揭秘:薇娅力荐国产品牌极印,照片打印机爆卖的秘密
- mysql5.7非源码版msi安装教程
- 回文后缀(suffix)
- 汕尾php培训,系统发生错误
- 移动端实现HTML5 mp3录音踩坑指南:系统播放音量变小、一些机型录音断断续续 之 MediaRecorder和AudioWorklet的终极对决
- 文件夹删不掉需要管理员权限怎么办 删除需要管理员权限的办法
- CString提取数字
- 小鑫の日常系列故事(七)——小纸条 (字符串) SDUT
- 7、C语言回调函数使用
- 已知一个字典包含若干员工信息,姓请编写一个函数,删除性别为男的员工信息
- dell文件服务器连接,配置DELL MD3200存储服务器连接到多台主机
- 廖雪峰Git简明教程整理
- 【FFmpeg学习】H264 视频码流分析
- java中new一个对象要经历哪些过程