我们可以在Highcharts的X轴上使用相同的类别名称吗

Question

我的应用程序中有一个图表，我想展示过去几个月的销售情况，我想展示三年的几个月。因此，X轴应类似于以下内容。早些时候，我有一个要求，希望将一年作为一组显示，将每年的月份作为子组显示，类似于下图。 Grouped Categories

我是通过BlackLabel插件实现的。但是，现在我想检查XAxix是否可以不按年份进行分类就可以使用几个月。因此，只有几个月会显示在XAxix上。所以应该像跟随第二张图片一样，有没有办法做到这一点？示例代码如下。 Expected Way

    Highcharts.chart('container-main-bar', {
  chart: {
    type: 'line',
    events: {
      drilldown: function(e) {


      },
      drillup: function(e) {


      }
    },
  },
  exporting: {
    enabled: true
  },
  title: {
    text: 'Car Sales'
  },
  xAxis: {
    type: 'category',
    labels: {
      formatter() {
        return `<span style="color: #626262">${this.value}</span>`
      }
    }
  },
  yAxis: {
    title: {
      text: 'Sales'
    },
    allowDecimals: false,
    labels: {
      formatter() {
        return `<span style="color: #626262">${this.value}</span>`
      }
    }

  },
  legend: {
    enabled: true
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y}'
      },
    },
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
  },

  "series": [{
    "name": "Australia",
    "data": [{
        "name": "Jan",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year5',

      },
      {
        "name": "Feb",
        "y": 40,
        "color": '#ff910c',
        "drilldown": 'Year4',

      },
      {
        "name": "Mar",
        "y": 50,
        "color": '#ff910c',
        "drilldown": 'Year3',

      },
      {
        "name": "Apr",
        "y": 30,
        "color": '#ff910c',
        "drilldown": 'Year2',

      },
      {
        "name": "May",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year1',

      },
      {
        "name": "Jun",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jul",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Aug",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Sep",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Oct",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Nov",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Dec",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jan",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Feb",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',
      },
      {
        "name": "Mar",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',
      },
      {
        "name": "Apr",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "May",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jun",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jul",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Aug",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Sep",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Oct",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Nov",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Dec",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jan",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Feb",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Mar",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Apr",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "May",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jun",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Jul",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Aug",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Sep",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Oct",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Nov",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      },
      {
        "name": "Dec",
        "y": 20,
        "color": '#ff910c',
        "drilldown": 'Year0',

      }
    ]
  }]
});

https://jsfiddle.net/Lwbmauks/32/

Answer 1

您可以使用相同的类别名称，但必须设置：

xAxis: {
    type: 'category',
    uniqueNames: false
}

实时演示：http://jsfiddle.net/BlackLabel/y4xa5e7w/

API：https://api.highcharts.com/highcharts/xAxis.uniqueNames