在设计一个项目中的数据展示页面时。想要设计双X轴,一个轴显示须要的项。一个轴对这些项进行分组。效果如图:

  • Highcharts自带双X轴展示方式。可是效果不是太理想。调整起来也会麻烦些
  • 看到Highcharts上有一个分组插件。grouped-categories.js。稍做改动就可以实现想要的效果,代码例如以下:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
title: {
text: null
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: '新',
color: '#FF3300',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
},{
name: '循',
color: '#009900',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}
,{
name: '备',
color: '#FFFF33',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}],
xAxis: {
categories: [{
name: "2011年",
categories: ["一", "二", "三"]
}, {
name: "2012年",
categories: ["一", "二", "三"]
}, {
name: "2013年",
categories: ["一", "二", "三"]
}]
}
});
});

本文地址:http://blog.csdn.net/yueritian/article/details/41309137

Highcharts:X轴分组堆叠图的更多相关文章

  1. highcharts 动态生成x轴和折线图

    highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...

  2. Highcharts 测量图;Highcharts 圆形进度条式测量图;Highcharts 时钟;Highcharts 双轴车速表;Highcharts 音量表(VU Meter)

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  3. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

  4. Python交互图表可视化Bokeh:5 柱状图| 堆叠图| 直方图

    柱状图/堆叠图/直方图 ① 单系列柱状图② 多系列柱状图③ 堆叠图④ 直方图 1.单系列柱状图 import numpy as np import pandas as pd import matplo ...

  5. python数据可视化-matplotlib入门(5)-饼图和堆叠图

    饼图常用于统计学模块,画饼图用到的方法为:pie( ) 一.pie()函数用来绘制饼图 pie(x, explode=None, labels=None, colors=None, autopct=N ...

  6. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  7. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  8. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  9. Highcharts 时间序列,可缩放的图表;Highcharts X 轴翻转曲线图;Highcharts 带标记曲线图

    Highcharts 时间序列,可缩放的图表 配置 图表 配置可缩放图表. chart.zoomType 指定了用户可以拖放的尺寸,用户可以通过拖动鼠标来放大,可能值是x,y或xy: var char ...

随机推荐

  1. linux 查看分区UUID的两种方法

    1. sudo blkid /dev/loop0: TYPE="squashfs"/dev/loop1: TYPE="squashfs"/dev/loop2: ...

  2. Python3使用PyMySQL操作数据库

    1. 安装PyMySQL pip install PyMySQL 关于PyMySQL的详细内容可以查看官方文档  Github 2. 创建表 在某个数据库内,使用以下指令建表 CREATE TABLE ...

  3. utf-8 下汉字为什么需要三个字节

    Unicode 十六进制码点范围 --> UTF-8 二进制0000 0000 - 0000 007F --> 0xxxxxxx 0000 0080 - 0000 07FF --> ...

  4. LeetCode(18)4Sum

    题目 Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  5. php添加了环境变更,还是显示 不是内部或外部命令 (注:添加到目录即可,不加 php.exe )

    重新配置了PHP环境,要安全PEAR扩展,CMD窗口运行PHP,提示不是内部或者外部命令或者可执行文件,解决方法是把PHP目录加入系统环境变量,不然的话,你只能CD到PHP安装目录下来运行PHP命令.

  6. Java学习之集合框架的迭代器--Iteratorjk及ListItertor接口

    通常情况下,你会希望遍历一个集合中的元素.例如,显示集合中的每个元素.一般遍历数组都是采用for循环或者增强for,这两个方法也可以用在集合框架,但是还有一种方法是采用迭代器遍历集合框架,它是一个对象 ...

  7. navicat不同数据库数据传输

    复制fo的t_fo_account表结构和数据到base库 结果

  8. Android渲染器Shader:环状放射渐变渲染器RadialGradient(三)

     Android渲染器Shader:环状放射渐变渲染器RadialGradient(三) Android RadialGradient渲染器提供一种环状.发散.放射形状的渐变渲染器. 写一个例子: ...

  9. [HNOI2004]宠物收养场(Treap)

    洛谷传送门 这题真是恶心,一开始没理解题意. 原来如果有狗,狗就会存在收养场中,直到有人来领养: 如果有人,人也会存在收养场中,直到有狗来被领养. 就是建一个treap,狗来把狗插进去,人来后把狗领养 ...

  10. bzoj3142[Hnoi2013]数列 组合

    Description 小 T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察 到:除第一天外每天的股价都 ...