Highcharts构建分组分类坐标轴

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

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

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

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

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



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

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

效果例如以下:



分组分类坐标轴

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

Highcharts构建分组分类坐标轴的更多相关文章

  1. ThinkPHP5 高级查询之构建分组条件

    ThinkPHP5 高级查询之构建分组条件 一.在tp5中通过where方法如何构建分组条件, 例如:where user_id=$this->user_id and (status in (4 ...

  2. Highcharts构建加权平均值图表

    Highcharts构建加权平均值图表 加权平均值图表是将图表中多个数据列值.依据加权算法计算获取平均值,并加入生成一个加权折线.在这里,我们直接使用第三方插件Dynamic Weighted Ave ...

  3. Highcharts构建空饼图

    Highcharts构建空饼图 空饼图就是不包括不论什么节点的饼图. 在Highcharts中,假设数据列不包括数据,会自己主动显示空白. 这样浏览者无法推断当前图表为什么类型.绘制一个空饼图的变通方 ...

  4. C#开发BIMFACE系列35 服务端API之模型对比6:获取模型构建对比分类树

    系列目录     [已更新最新开发文章,点击查看详细] BIMFACE平台提供了服务端"获取模型对比构件分类树"API.目录树返回结果以树状层级关系显示了增删改的构件信息,里面无法 ...

  5. js实现td排序及分组分类

    如题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  6. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

    直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...

  7. weka实际操作--构建分类、回归模型

    weka提供了几种处理数据的方式,其中分类和回归是平时用到最多的,也是非常容易理解的,分类就是在已有的数据基础上学习出一个分类函数或者构造出一个分类模型.这个函数或模型能够把数据集中地映射到某个给定的 ...

  8. Excel透视表进阶之排序、筛选、分组、总计与分类汇总

    排序 自动排序 升序: 数字(从小到大) 日期(日期越早越靠小) 英文(按照A-Z) 中文(按照拼音的A-Z) 手动排序 通过鼠标的拖拽来完成手动排序 通过快捷菜单的方式:右击-移动 依据其他字段进行 ...

  9. highcharts框架使用总结

    Highcharts官网地址:https://www.hcharts.cn/products/highcharts首先需要引入jQuery框架,然后包含Highcharts框架需要使用到的js文件,最 ...

随机推荐

  1. Codeforces Round #456 (Div. 2)

    Codeforces Round #456 (Div. 2) A. Tricky Alchemy 题目描述:要制作三种球:黄.绿.蓝,一个黄球需要两个黄色水晶,一个绿球需要一个黄色水晶和一个蓝色水晶, ...

  2. Python递归 — — 二分查找、斐波那契数列、三级菜单

    一.二分查找 二分查找也称之为折半查找,二分查找要求线性表(存储结构)必须采用顺序存储结构,而且表中元素顺序排列. 二分查找: 1.首先,将表中间位置的元素与被查找元素比较,如果两者相等,查找结束,否 ...

  3. oracle客户端不需要配置tnsnames.ora文件直接连接服务器数据库

    在以前的oracle使用过程中,想要在客户端连接到服务器时,都是在客户端中的tnsnames.ora文件配置如以下内容: adb = (DESCRIPTION = (ADDRESS_LIST = (A ...

  4. Unity 软件使用事项

    打开旧版工程 目前发现两种方式来触发升级程序: 1.Unity软件启动时选择旧版工程,触发更新 2.直接打开旧版工程的场景文件,触发更新   在使用中发现一种错误做法,不知道是不是共性问题,在此先记录 ...

  5. kali&BT安装好之后无法上网(包括Wifi)或者无法获得内网IP解决方法

    大家都知道,要想进行内网渗透攻击,你必须要在那个内网里.但是大家在Vmware里安装kali的时候,大多数用户为了方便,未选择桥接模式,而是选择了使用与本机共享的IP网络当然,这样能上网,但是你的虚拟 ...

  6. python实现IMAP协议下email收取

    本文为转载,原文在这里. 所谓无痕取信,目前主要是指从邮箱中把信件收取后,邮箱内状态不发生任何改变.这里的状态主要是指两部分,一部分是邮件状态不变,即已读与未读状态不变,另一部分是指邮箱记录的登陆IP ...

  7. [转载]DirectX SDK (June 2010)安装错误S1023,解决方法

    导致这个错误的原因是在安装DirectX SDK (June 2010)之前.我就安装了VS2010 . 所以也就安装了: Microsoft Visual C++ 2010 x86 Redistri ...

  8. 纯css导航下划线跟随效果【转载】

    css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...

  9. Window 下一台机器配置三个Tomcat实例

    下面我们把配置的详细过程写在下面,以供参考:(此例以配置三个Tomcat为例) 1. 下载apache-tomcat-8.0.63,下载下来的文件为apache-tomcat-8.0.63.zip. ...

  10. 基于ZooKeeper实现——分布式锁与实现

    引言 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提 ...