如何在高图中组合相似的x轴值?

时间:2017-05-15 01:51:44

标签: javascript highcharts

我有这个高图:

enter image description here

此轴由此代码构成:

    var xAxis = [{
                    categories: {{ t|safe }},
                    labels: {rotation: -90,
                    style: { fontWeight: 'bold' }},
                        title: { text: ' '}


                },{
                    categories:{{ secondxlabel|safe }},
                    linkedTo: 0,
                    opposite: false,
                    labels: {rotation: -90,
                    style:{color: '#2f10a5'}}

                    }]
                ;
                var yAxis = {
                    title: {
                        text: ' '

                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#050505'
                    }],
                    labels:{
                        style: {
                    color: '#a5110e'
                    }
                    }
                };

我希望有这种x轴,所有重复的月份将只分组为一个:

enter image description here

任何人都可以与我分享一些想法吗?

1 个答案:

答案 0 :(得分:1)

使用grouped categories插件进行Highcharts。

  xAxis: [{
    labels: {
      groupedOptions: [{
        rotation: 90
      }],
      rotation: 0
    },
    categories: [{
      name: 'Group 1',
      categories: ['Jan', 'Feb', 'Mar']
    }, {
      name: 'Group 2',
      categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug']
    }, {
      name: 'Group 3',
      categories: ['Sep', 'Oct', 'Nov', 'Dec']
    }]
  }],

示例:http://jsfiddle.net/e87m6dLv/1/