Добавьте пользовательские метки к осям в Highcharts

Question

В моем приложении есть Highchart, показывающий продажи автомобилей за каждый месяц. С учетом введенного пользователем значения даты на графике должны отображаться продажи автомобилей за последние 12 месяцев. Если дата пользовательского фильтра 2018-09-10, он должен показывать продажи автомобилей по сентябрь 2017 года, октябрь 2017 года, ноябрь 2017 года, декабрь 2017 года, январь 2018 года, февраль 2018 года, март 2018 года, апрель 2018 года, май. -2018, июнь-2018, июль-2018, август-2018, сентябрь-2018, октябрь-2018, ноябрь-2018, декабрь-2018.

А также мне нужно показать разделение по годам на самой диаграмме. Я нашел изображение, похожее на это, . Мне нужно что-то подобное в моем графике тоже. Есть ли способ, которым я могу это сделать?

Следующая скрипта содержит пример кода. Мне нужно показать год разделения 2017 и 2018.

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

    },
    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": "Car Sales",
            "colorByPoint": true,
            "data": [
                {
                    "name": "July",
                    "y": 62.74
                },{
                    "name": "August",
                    "y": 62.74
                },{
                    "name": "September",
                    "y": 62.74
                },{
                    "name": "October",
                    "y": 62.74
                },{
                    "name": "November",
                    "y": 62.74
                },{
                    "name": "December",
                    "y": 62.74
                },{
                    "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
                }
            ]
        }
    ]
});

https://jsfiddle.net/yasirunilan/8xvjcd5h/1/

Answer 1

Вы можете использовать Highcharts.SVGRenderer для создания разделительной линии и текста с годом. Если у вас всегда есть категории в xAxis, вы можете сделать это следующим образом:

function renderSeparator(xVal, chart, year) {
  var xAxis = chart.xAxis[0],
    pxVal = xAxis.toPixels(xVal + 0.5);

  chart.renderer.path([
    'M', pxVal, chart.plotTop,
    'L', pxVal, chart.plotTop + chart.plotHeight
  ]).attr({
    stroke: 'black',
    'stroke-width': 1
  }).add();

  chart.renderer.text(
    year, pxVal + 10, 70
  ).css({
    color: 'black',
    fontSize: 20
  }).attr({
    zIndex: 6
  }).add();
}

// Create the chart
Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          year = 2014;

        chart.renderer.text(year, chart.plotLeft + 10, 70)
          .css({
            color: 'black',
            fontSize: 20
          })
          .attr({
            zIndex: 6
          })
          .add();

        year++;

        Highcharts.each(xAxis.names, function(el, i) {
          if (el === "December") {
            renderSeparator(i, chart, year);
            year++;
          }
        });
      }
    },
    type: 'column'
  },

  ...

});

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/0ma6efcz/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text