Highcharts中按月分类的类别

Question

我有一个使用Highcharts的应用程序。在Fiddle之后显示了代码示例。

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/yasirunilan/Lwbmauks/7/

我要展示的是每年几个月内销售分布情况。如果按3年进行销售分配，则应该在X轴上显示每年的每个月。当我尝试时，似乎月份名称相同，即使年份不同，它们也会积聚在同一点。

下面的图像显示了我需要它的确切方式。有什么办法可以实现？

Answer 1

@ Core972注意到，您应该使用“分组类别”插件。您可以基于现有类别创建新的类别格式，并通过以下方式更新轴：

  render: function() {
    if (redrawEnabled) {
      var xAxis = this.xAxis[0],
        categories = xAxis.names,
        year = 2015,
        months = [],
        newCategories = [];

      Highcharts.each(categories, function(name, i) {
        months.push(name);

        if (name === 'Dec') {
          newCategories.push({
            name: year,
            categories: months.slice()
          });
          year++;
          months.length = 0;
        }
        if (i === categories.length - 1) {
          redrawEnabled = false;
          xAxis.update({
            categories: newCategories
          });
          redrawEnabled = true;
        }
      });
    }
  }

实时演示：https://jsfiddle.net/BlackLabel/vnLy3pwq/