Highcharts x轴分组显示

2019独角兽企业重金招聘Python工程师标准>>>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

样式一： 

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    plotBands: [{
      id: 'first-category',
      color: '#A9CDD9',
      from: -0.5,
      to: 2.5
    }, {
      id: 'second-category',
      color: '#A9D9BB',
      from: 2.5,
      to: 6.5
    }],
    categories: [{
      name: 'First',
      categories: ['One', 'Two', 'Three']
    }, {
      name: 'Second',
      categories: ['Four', 'Five', 'Six', 'Seven']
    }],
    labels: {
      rotation: 0
    }
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  series: [{
    data: [10, 10, 10, 10, 10, 10, 10]
  }]
});

样式二：

        columnChart.chartConfig.xAxis.plotBands = [
            {
                from:0,
                to:3,
                borderColor:$rootScope.deepxray_app.color.danger,
                borderWidth:1,
                label:{
                    text:"区域1",
                }
            },
            {
                from:3.1,
                to:7,
                borderColor:$rootScope.deepxray_app.color.success,
                borderWidth:1,
                label:{
                    text:"区域1",
                }
            }
        ]

 

plotBands API：https://api.hcharts.cn/highcharts#xAxis.plotBands.borderWidth

转载于:https://my.oschina.net/u/2391658/blog/1925857