Highcharts构建分组分类坐标轴

本文介绍如何使用Highcharts及Grouped-Categories插件构建分组分类坐标轴,通过设置不同层级标签样式来优化数据展示。

Highcharts构建分组分类坐标轴


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

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

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

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

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

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

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

效果例如以下:


分组分类坐标轴
PS:该内容已经增加《网页图表Highcharts实践教程基础篇》v1.2.3中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值