十八、基础教程-钻取功能(drilldown)
钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(drillup)和向下钻取(drilldown)。
Highcharts 在 3.0.8 开始提供内置的钻取功能功能,使用钻取功能需要额外的引入相关的模块文件
<script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>
一、基础的使用
下钻的基础使用是指定数据点的 drilldown 属性,其值为保存在根属性 drilldown.series 的数据列的 ID,也就是数据点关联着隐藏的数据列(保存在 drilldown数据列数组里),当数据点被点击时,这个隐藏的数据列会被加载到图表中并替换当前数据列。对于柱状图、条形图及饼图,下钻过成会用动画效果来过渡。
对于多级下钻,可以继续在 drilldown.series 的数据点里配置 drilldown 属性。
series: [{name: 'Things',colorByPoint: true,data: [{name: 'Animals',y: 5,drilldown: 'animals'}, {name: 'Fruits',y: 2,drilldown: 'fruits'}, {name: 'Cars',y: 4,drilldown: 'cars'}]
}],
drilldown: {series: [{id: 'animals',data: [['Cats', 4],['Dogs', 2],['Cows', 1],['Sheep', 2],['Pigs', 1]]}, {id: 'fruits',data: [['Apples', 4],['Oranges', 2]]}, {id: 'cars',data: [['Toyota', 4],['Opel', 2],['Volkswagen', 2]]}]
}
二、事件及相关属性
1. 钻取事件
钻取相关的事件包括 chart.events.drilldown 和 chart.events.drillup。这些事件在异步钻取或高级使用是非常有用
2. 可钻取的坐标轴及数据标签样式
为了区别普通数据点和可钻取的数据点,我们提供了设置可钻取 X 坐标轴样式(activeAxisLabelStyle)及数据标签样式(activeDataLabelStyle)设置
3. 返回上一级操作按钮
我们提供了返回上一级操作按钮相关的配置属性,包括主题、定位等,其中按钮中的文字是在 语言文字 中设定的。
三、异步钻取
在大多数情况下,我们需要动态的加载下钻的数据列数据,在这种情况下,可以设置数据点的 drilldown = true,然后在钻取事件里做进一步的数据获取操作。当数据获取完毕后,我们可以通过 Chart.addSeriesAsDrilldown 函数来讲下钻的数据列添加到图表中。对于下钻包含多个数据列的情况下,可以先调用 Chart.addSingleSeriesAsDrilldown 函数来一次添加数据列,最后调用 Chart.applyDrilldown 来应用所有的下钻数据列。对于下钻包含多个数据列的情况下,可以先调用 Chart.addSingleSeriesAsDrilldown 函数来一次添加数据列,最后调用 Chart.applyDrilldown 来应用所有的下钻数据列。
十八、基础教程-钻取功能(drilldown)相关推荐
- 燕十八公益教程-学习感想
燕十八老师的公益教程第二期已经开了有一段时间了,也跟老师从头学习了很多东西,老师的讲课很精彩,每讲一个知识点都从生活中举例子,浅显易懂,深入浅出. 每天我8点到开始,都是我期待的时间段,虽说放弃了娱乐 ...
- ssm当用户登录成功显示用户名_从零到企业级SSM电商项目实战教程(十八)用户登录功能开发...
用户模块功能介绍 1.登录 2.用户名验证 3.注册 4.忘记密码 5.提交问题答案 6.重置密码 7.获取用户信息 8.更新用户信息 9.退出登录 学习目标 1.理解横向越权.纵向越权安全漏洞 2. ...
- Mac OS使用技巧十八:Safari碉堡功能之一制作Widget
Safari的使用大家应该自己摸索就可以慢慢驾轻就熟,毕竟再高端也是个浏览器,从开始上网就要一直使用浏览器,Safari只是众多浏览器中的一个比较强大的罢了. 下面给大家介绍一下Safa ...
- 十、基础教程-数据提示框(Tooltip)
数据提示框指的当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值.数据单位等.数据提示框内提示的信息完全可以通过格式化函数动态指定:通过设置 tooltip.enabled = false ...
- vb net excel 剪贴板 粘贴_Excel零基础教程选项卡功能详解
Excel功能区详解 你了解[开始]选项卡吗? Excel的[开始]选项卡 应该是我们使用最多的选项卡了 开始中包含了粘贴板.格式刷. 填充桶.条件格式.序列等等实用功能 今天我们就从开始选项卡开始 ...
- 易课寄在线购课系统开发笔记(二十八)--完成用户注册功能
用户注册 功能分析 请求的 url:/user/register 参数:表单的数据:username.password.phone.email 返回值:JSON 数据.ECoursesResult 接 ...
- 布尔教育_燕十八 php,布尔教育_燕十八_HTML视频资源课件
<布尔教育_燕十八_HTML教程>从最基本的概念开始讲起,步步深入,带领大家学习HTML.CSS样式基础知识,了解各种常用标签的意义以及基本用法,后半部分讲解CSS样式代码添加,为后面的案 ...
- SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十八):Web代理功能
在Senparc.Weixin.dll v4.5.7版本开始,我们提供了Web代理功能,以方便在受限制的局域网内的应用可以顺利调用接口. 有关的修改都在Senparc.Weixin/Utilities ...
- 燕十八ajax笔记,燕十八php視频教程笔记(PHP基础部分).doc
燕十八php視频教程笔记(PHP基础部分) 001-开学典礼 002-变量概念及命名规范 <?php //?$a?是钥匙[107房间],?房间里的内容是值, /* echo?$a,?什么过程? ...
最新文章
- 【spring框架】spring整合hibernate初步
- SQL学习笔记 where子句用法,like关键字 嵌套查询
- 嵌入式开发之davinci--- ipnc中用到的cmem
- Android Architecture Components 整理
- linux挂载文件夹查看命令,findmnt命令查找已挂载的文件系统
- 服务器集群后产生那些问题
- Diango博客--19.使用 Docker部署项目到线上服务器
- python中函数的入门
- Zabbix3 ——Server端的安装配置小结
- 电脑qq音乐显示无法代理服务器,电脑QQ音乐软件无法登录如何解决
- 安装WIN8提示Error Code:0x0000005D的解决办法
- linux 卸载oracle库,Linux下完美卸载 Oracle
- C++ strcpy、strcat、strcmp和strlen的实现
- 地球系统模式(CESM)技术
- iOS 判断机型是否为 iPhone X、XR、XS、XS Max 的方法
- 成都web前端开发工程师
- 如何积累科研经验,快速培养科研素质
- 用nodejs把多个PDF文件成为一个PDF文件
- STM32Cube-直接存储器访问(DMA)
- forum.php手机怎么打开,解决无法使用电脑访问调试discuz手机版或触屏版问题
热门文章
- 微信公众号程序开发接入流程
- linux su 拒绝权限,Linux禁止非WHEEL用户使用su命令
- C++_华氏度转换摄氏度
- 创建枚举类 java_Java枚举类
- 人工智能数学基础---定积分3:微积分基本公式(牛顿-莱布尼茨公式)
- 计算机上没有端口DOT4,hp1010win7系统打印机装不了dot4端口没反应
- Indented Inventory BOM如何转为最终的单层采购BOM
- DNSPod十问党霏霏:充电桩是披着高科技外皮的传统基建?
- ArduinoUNO实战-第二十二章-红外遥控实验
- 规模再创新高!新能源汽车蓝海谁主沉浮