在设计一个项目中的数据展示页面时。想要设计双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. LayuI固定块关闭

    1.近期项目使用了layui的固定块,但是当到某个独立页面时,固定块还在,就显得突兀: 2.通过F12查看,发现代码: <ul class="layui-fixbar" st ...

  2. Oracle数据库日常SQL的使用

    DDL 语句(数据定义语言Create.Alter. Drop.Truncate) 1.建表:create table 表名(): 2.复制表结构及其数据:create table 新表名 as se ...

  3. linux shell 自动判断操作系统release 然后连接FTP yum源的脚本

    如何搭建本地yum源见附录① 如何搭建FTP yum源见附录② 脚本正文: #!/bin/sh# CenterOS config yumOSV=`rpm -q --qf %{version} cent ...

  4. 4 SQL 数据更新

    4 数据更新 4-1 数据的插入(INSERT语句的使用方法) 通过create table语句创建出来的表,可以将其比作一个空空如也的箱子.只有把数据装入到这个箱子后,它才能称为数据库.用来装入数据 ...

  5. Android API Guides 安卓API指导----第一部分:Introduction(介绍)

    第一部分: Introduction(介绍) 目录包含:APP  Fundamentals     (应用程序基础) Device   Compatibility(设备兼容性) System Perm ...

  6. LeetCode(11) Container With Most Water

    题目 Given n non-negative integers a1, a2, -, an, where each represents a point at coordinate (i, ai). ...

  7. mysql数据库中的索引有那些、有什么用

    本文主要讲述了如何加速动态网站的MySQL索引分析和优化. 一.什么是索引? 索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第 ...

  8. Java 关于循环的练习--和为n的正数序列

    要求:输入一个正数n,输出所有和为n的连续正数序列. 分析可以从1开始连续加,若到i的和等于n则输出1到i之间的连续正数,若到i的和大于n,则改为从2开始连续加,再判断到i的和是否等于n,等于则输出2 ...

  9. 【06】sass编译工具(弃)

    [06]编译工具(弃) SASS转译工具 除了使用sass命令来转译SASS文件之外,还可以借助第三方工具完成,目前世面上较为流行的转译工具主要有: Compass.app Scout Codekit ...

  10. 性能测试工具 - ab 简单应用

    之前知道一般网站性能可以通过 LoadRunner, JMeter, QTP 等相应的软件进行测试, 印象中本科学习 “软件测试” 这门课程时安装并使用过, LoadRunner等不是一个小软件, 安 ...