如何在高图表中设置较少的xAxis数据和更多的列图表数据

Question

这是我的ts文件代码

xAxis:{
categories:['row-1','row-2','row-3','row-4'],
max:3
},
plotOptions:{
column:{
stacking:'normal'
}
}
series:[
{
type:'column',
data:[12,23,34,45,56,67,78,89,90]
},{
type:'column',
data:[12,32,43,54,65,76,87,98,91]
}
]

下面是我的工作代码，我想要的是xAxis，我需要在本系列中输入的所有数据。我是新来的，所以请

我使用了max，这样我的xAxis就不会扩展，我尝试了所有可能的方法，但是我无法得到结果STACKBLITZ码

图片下面的是我希望我的图表成为的方式

​

​

Answer 1

实现这一目标的最简单方法是向类别中添加空字符串。

  xAxis: {
    categories: ['', 'row-1', '', 'row-2', '', 'row-3', '', 'row-4', '']
  },

演示： https://jsfiddle.net/BlackLabel/8uy9vo0t/

您还可以使用labels.formatter将类别直接添加到轴上的相关位置。

  xAxis: {
    tickLength: 0,
    labels: {
      formatter: function() {
        let position = 1;
        for (let i = 0; i < categories.length; i++) {
          if (this.pos === position) {
            return categories[i]
          }
                    position = position + 2
        }
      }
    },
  },

演示： https://jsfiddle.net/BlackLabel/a1jv9nqL/

API参考： https://api.highcharts.com/highcharts/xAxis.labels.formatter

另一种方法是使用分组类别模块。

  xAxis: {
    tickWidth: 0,
    labels: {
      style: {
        visibility: 'hidden',
        fontSize: '0px',
      },
      groupedOptions: [{
        style: {
          visibility: 'visible',
          fontSize: '12px',
        },
      }],
    },

    categories: [{
        name: "row-1",
        categories: ["0", "1"]
      }, {
        name: "row-2",
        categories: ["0", "1"]
      },
      {
        name: "row-3",
        categories: ["0", "1"]
      },
      {
        name: "row-4",
        categories: ["0", "1", "2"]
      }
    ]
  },

演示： https://jsfiddle.net/BlackLabel/3nkeswL5/

Documentation: 类别/

如果可以修改数据结构，还可以考虑使用叠加列和分组列。

官方演示： https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped