Highcharts 图表缩放与坐标轴的反转

数据访问:https://www.hcharts.cn/

一、图表缩放

功能描述:

图表缩放指的是局部放大或缩小图表,可以更方便的查看图表数据。

Highcharts支持两种方式缩放,缩放(zoom)和平移(panning), 并且是完美支持移动端手势操作的 。

1、缩放(zoom

代码示例:


图中 zoomType 取值为 x、y、xy 中的一个,分别表示图表可以沿 x 轴,y轴,xy轴放大,也就是水平、竖直、平面放大。

效果图:


2、平移(panning

图表缩放后,我们还可以进行平移操作。默认情况下,Highcharts是没有开启平移功能的;

panning:是否开启平移功能,Highcharts默认是 false。

panKey:平移按键,对应的是键盘的键名,例如 ‘Shift’, ‘ctrl’ 。对于 Highcharts,开启平移后,还需要设置 pankey,对应的操作是缩放图表后,按钮指定按键就可以平移。

pinchType:同 zoomType,用于移动端手势操作缩放方向。

代码示例:

效果图:


二、坐标轴的反转

功能描述:

坐标轴的反转是x轴与y轴的位置调换,满足一定的需求。

Highcharts通过坐标轴的反转属性(inverted)进行反转;(reversed)可以改变坐标轴标签的方向。

代码示例:

效果图:

坐标轴标签方向改变后:


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容