Highcharts-7—下钻图形
本文中只讲解一个图形的制作:下钻图
下钻表示的是通过层级的方式来展示数据,比如我们想查看国内人口数的占比情况,我们可以先看各个省份的情况,接着我们想看具体某个省中各个地级市的占比,这就是通过下钻方式实现。
代码
1 | # -*- coding: utf-8 -*- |
效果
整体效果
下钻效果
当我们选择其中某个图形进行点击的时候,会展示其下面的图形和数据,比如我们选择第一个:
下钻的图形展示的是折线图,因为我们指定的是line
类型:
如果我们想回到主图中,点击右上角的如图位置:
选择第3个图形,我们选择的是饼图pie
,看下实际的效果:
这便是下钻图表的效果👍
问题
问题出现
问题:目前在jupyter notebook
中的时候使用的是python-highcharts
,运行的结果不能下钻到下一层级中
问题所在
打印出返回的源码
1 |
|
找了半天没有发现问题所在,后来在stack overflow上有人遇到了同样的问题:https://www.coder.work/article/5773029
问题解决
有人提出了问题的解决方案,原来模块版本的不统一:
1 | <script type="text/javascript" src="https://code.highcharts.com/modules/drilldown.js"></script> |
我们上面src中的两个链接发现:
- 第一个是新的版本
- 第二个是旧的版本
按照建议修改html
代码之后就能够正常显示下钻的图形。
待解决
目前显示下钻图形是通过前端的html
代码实现的,在jupyter notebook如何直接在线显示图形还是没有解决😭
感觉是下载highcharts
的版本时候,模块文件要统一下。后续跟进这个问题。