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. C# Selenium with PhantomJSDriver get image width and height (获取图片的长和高)

    //get image width and height var image=driver.FindElement(By.ClassName("it-Header_authorImage&q ...

  2. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

  3. nginx location 指令意义

    基本语法:location [=|~|~*|^~] /uri/ { … } = 严格匹配.如果这个查询匹配,那么将停止搜索并立即处理此请求.~ 为区分大小写匹配(可用正则表达式)!~为区分大小写不匹配 ...

  4. 防范SQL注入

    使用占位符的方式写查询语句hibernate

  5. java1.8环境配置+win10系统

    Java环境配置相关 Java jdk 1.8版本的环境配置和1.7版本 存在一些差异,当然不同的操作系统可能会对jdk配置有一定的变化.本文我主要说1.8版本的jdk在window10 系统上的配置 ...

  6. Reflow(回流)和Repaint(重绘) (转)

    原文地址:http://blog.csdn.net/qq_18826911/article/details/68924255 首先我们要明白的是,页面的显示过程分为以下几个阶段: 1.生成DOM树(包 ...

  7. beego小技巧两则:通过命令行自定义端口和环境,url中带有中划线处理

    1,通过命令行自定义端口和环境 先用flag提取参数,如果要环境,就反向注进去, 如果是端口,就打到beego.Run函数里去. 2,在作router里的url解析时,如果URL中含有-中划线,用严格 ...

  8. Linux平台上SQLite数据库教程(一)——终端使用篇

    https://blog.csdn.net/u011192270/article/details/48031763 https://blog.csdn.net/fml1997/article/deta ...

  9. MP3 Music Library in Tornado

    Web2.0的lab3,使用tornado实现,自己改了改UI 效果 选中播放列表后的效果 原来的图标长得太丑了,有空找些好看点的加进去……以后继续完成extra feature,当复习python了 ...

  10. 仿微信小红圈消息提示App消息红圆点提示

    代码: <div class="wrap"> <div class="img"></div> <div class=& ...