Как показать одно и то же название месяца двух лет по оси X старших графиков

Question

В моем приложении есть диаграмма Highcharts.Мне нужно отобразить, сколько автомобилей было продано в каждом месяце года, и на этом графике показаны продажи автомобилей за период в 13 месяцев (например, июнь 2017 года - июнь 2018 года), чтобы один и тот же месяц (из двух лет) отображался два раза.Категория X должна выглядеть примерно так (июнь, июль, август, сентябрь, октябрь, ноябрь, декабрь, январь, февраль, мар, апр, май, июнь)

Но проблема в том, что на диаграмме отображается только один «июнь»месяц на графике.Я думаю, что дублирование имени категории является ошибкой.Есть ли обходной путь для этого?

Вот что я пробовал до сих пор:

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Car Sales'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent car salee'
        }

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

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    "series": [
        {
            "name": "Browsers",
            "colorByPoint": true,
            "data": [
                {
                    "name": "January",
                    "y": 62.74,
                },
                {
                    "name": "February",
                    "y": 10.57,
                },
                {
                    "name": "March",
                    "y": 7.23,
                },
                {
                    "name": "April",
                    "y": 5.58,
                },
                {
                    "name": "May",
                    "y": 4.02,
                },
                {
                    "name": "June",
                    "y": 1.92,
                },
                {
                    "name": "July",
                    "y": 7.62,
                },
                {
                    "name": "August",
                    "y": 7.62,
                },
                {
                    "name": "September",
                    "y": 7.62,
                },
                {
                    "name": "October",
                    "y": 7.62,
                },
                {
                    "name": "November",
                    "y": 7.62,
                },
                {
                    "name": "December",
                    "y": 7.62,
                },
                {
                    "name": "January",
                    "y": 7.62,
                }
            ]
        }
    ],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

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

JСсылка по ссылке: https://jsfiddle.net/yasirunilan/2ryfnv3q/

Answer 1

Самый простой способ добиться этого во время развертки - это «обмануть» с названием категории.Если вы сможете добавить пробел (или любой другой случайный символ) в конце второго Jan в развертывании, это решит проблему.

Нажмите здесь дляскрипка, демонстрирующая решение.

 "drilldown": {
        "series": [
            {
                "name": "Chrome",
                "id": "Chrome",
                "data": [
                    {
                        "name": "Jan",
                        "y": 0.1
                    },
                    {
                       "name": "Feb",
                        "y": 0.1
                    },
                    //snip
                    {
                        "name": "Jan ",
                        "y": 0.1
                    }
                ]
            },