Разделение по месяцам в Highcharts

Question

У меня есть приложение, которое использует Highcharts. Следующая скрипка показывает пример кода.

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/