Highcharts构建分组分类坐标轴

简介:

Highcharts构建分组分类坐标轴


分组分类坐标轴是将坐标轴的类别标签进行进一步分组,从而形成双层、多层结构。

这样更利于数据分组展现。

实现分组分类坐标轴须要借助第三方插件Grouped-Categories实现。引入该插件后。用户就能够使用categories构建分组分类标签。语法形式例如以下:

  • categories:[{
  • name:String,
  • categories:CategoriesObject
  • }]

当中,參数String指定分组名称,该名称会作为一个标签显示在坐标轴上。參数CategoriesObject指定下级分组形式。它能够是另外一个分组分类对象,也能够是一个类型数据。

设置分组后。用户还能够针对每一个层次标签单独设置样式。这时须要使用该插件添加的配置项groupedOptions。其语法形式例如以下:

  • labels:{
  • groupedOptions:[{
  • //第一层的labels各类配置项
  • },{
  • //第二层的labels各类配置项
  • },{
  • //第三层的labels各类配置项
  • }]
  • }

效果例如以下:


分组分类坐标轴

PS:该内容已经增加《网页图表Highcharts实践教程基础篇》v1.2.3中。






本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5379291.html,如需转载请自行联系原作者

相关文章
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
3048 0
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
3247 0
|
12月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
1363 0
|
缓存 JavaScript
vue组件强制刷新的5种方案
vue组件强制刷新的5种方案
1093 2
|
前端开发 流计算
css:text-decoration给文字增加上划线、删除线、下划线
css:text-decoration给文字增加上划线、删除线、下划线
2944 0
css:text-decoration给文字增加上划线、删除线、下划线
|
资源调度 JavaScript 前端开发
vue3.3-TinyMCE:TinyMCE富文本编辑器基础使用
vue3.3-TinyMCE:TinyMCE富文本编辑器基础使用
1630 0
|
存储 编解码 边缘计算
阿里云视频点播服务介绍|学习笔记
快速学习阿里云视频点播服务介绍
阿里云视频点播服务介绍|学习笔记
|
容器
ECharts雷达图简单配置的使用方法
ECharts雷达图简单配置的使用方法
360 0
|
Android开发
泼辣修图2023最新版功能介绍及使用教程
看了看后台管理,发现修图软件比较受大家欢迎,所以今天我打算在更新一个修图软件泼辣修图!泼辣修图是一款深受用户喜爱的修图软件,所以今天为大家推荐这款修图APP,经过汉化,所有滤镜和工具都能免费用,无任何的廣搞! 无论你是入门新手还是摄影专家,泼辣修图都可以满足你的一切需求。对于入门新手而言,泼辣修图搭载的先进自动增强工具和富有创意的图像滤镜,可以帮助他们快速雕琢图像的每一个细节。对于摄影专家而言,图层混合、局部调整、曲线工具等等功能则是他们青睐有加的专业特性。
837 0