您现在的位置是：首页 > 前端 > 前端开发设计思想

Highcharts：X轴分组堆叠图

博主添加时间：2014-11-20 11:42:25 【设计思想】热度：278人已围观

在设计一个项目中的数据展示页面时，想要设计双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: ["一", "二", "三"]
            }]
        }
    });
});

【牛腩新闻发布系统】----你的验证码正确么
前言这是一个神奇的网站——牛腩新闻发布系统，虽然做的不咋地，但毕竟是自己动手敲出来，还是有一点点的满足感。同时这也是小编的第一个雠小鸭，长相不算漂亮，发育还是挺健全的。终有一天我的丑小鸭会变成白天鹅。一步一步的进化，一步一步的蜕变…… ...
页面登陆框老是乱乱的？banner跨页图片缩小之后总是在侧面不能显示主要部分？哈哈~我来帮你忙~~
页面大小变化内容排布 banner图片排布登陆框和banner背景混合排布 ...
【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要：　　休假结束，酸奶小妹要从重庆驾车去北京。可是途中要去西安奶奶家拿牛奶饼干呢！用百度地图API，能不能帮我实现这个愿望呢？------------------------------------------------------------------------------------------------ ...
easyui导出excel无法弹出下载框的解决办法
之前用ajax做的，代码如下（ActionUrl为一般处理程序ashx的路径）： $.ajax({ url: ActionUrl + '?action=export& ...
【智能聊天机器人】小花猫的成长之路——3.雏形(让你立马拥有一个自己的智能聊天机器人)
大家好，今天不废话了，直接来给大家分享一下如何实现一个网页版智能聊天机器人的基本功能，也就是标题说的：雏形。 ...