码迷,mamicode.com
首页 > 其他好文 > 详细

Highcharts:X轴分组堆叠图

时间:2016-03-08 13:38:13      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

在设计一个项目中的数据展示页面时。想要设计双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轴分组堆叠图

标签:

原文地址:http://www.cnblogs.com/gcczhongduan/p/5253673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!