热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Highcharts:X轴分组堆叠图

Hightchart双X轴分组堆叠图

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



推荐阅读
author-avatar
李伯翔刚瑋嘉军
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有