Отображение меток нанесенных точек, которые не отображаются должным образом на X Range Chart для первой даты месяца - Highcharts

Question

Я сейчас работаю над графиком дальности топора, чтобы отобразить график действий.У меня проблема с всплывающим окном, используемым для отображения информации о данных при наведении курсора на столбцы.

Для каждой первой даты любого конкретного месяца я не получаю точную необходимую информацию.

Вот мой код:

Highcharts.chart('container', {
    chart: {
       type: 'xrange',
        styledMode: true
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Proto', 'Dev', 'Test'],
        reversed: true
        },
    series: [{
        name: 'Project:',

        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 0, 1),
            x2: Date.UTC(2014, 5, 2),
            y: 0,
            partialFill: 0.25
        },  {
            x: Date.UTC(2014, 2, 1),
            x2: Date.UTC(2014, 3, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
          dataLabels: {
          enabled: true
        }
       }]

      });

Я ожидаю, что выходные данные будут иметь следующий формат:

Среда, 1 января 2014 г. - понедельник, 2 июня 2014 г. Проект: Proto

Но фактический результат таков:

Январь 2014 - июнь 2014 Проект: Proto

Буду очень признателен, если кто-нибудь поможет мне решить эту проблему.

Спасибо.

Answer 1

Вы можете настроить содержание всплывающей подсказки, используя функцию обратного вызова tooltip.formatter, и форматировать даты по своему усмотрению, используя метод Highcharts.dateFormat().Проверьте код и демоверсию, размещенную ниже.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    styledMode: true
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Proto', 'Dev', 'Test'],
    reversed: true
  },
  tooltip: {
    formatter: function() {
      var point = this,
        series = point.series,
        color = point.color || series.chart.options.colors[point.colorIndex],
        firstDate = Highcharts.dateFormat('%A, %b %e, %Y', point.x),
        secondDate = Highcharts.dateFormat('%A, %b %e, %Y', point.x2),
        header = '<span style="font-size: 10px">' + firstDate + ' - ' + secondDate + '</span><br/>',
        content = '<span style="color:' + color + '">\u25CF</span> ' + series.name + ': <b>' + point.yCategory + '</b><br/>';

      return header + content;
    }
  },
  series: [{
    name: 'Project',
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 0, 1),
      x2: Date.UTC(2014, 5, 2),
      y: 0,
      partialFill: 0.25
    }, {
      x: Date.UTC(2014, 2, 1),
      x2: Date.UTC(2014, 3, 19),
      y: 1
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 23),
      y: 2
    }],
    dataLabels: {
      enabled: true
    }
  }]

});

Демо:
https://jsfiddle.net/BlackLabel/3wbscy6q/

Ссылка API:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts#.dateFormat
https://api.highcharts.com/highcharts/tooltip.dateTimeLabelFormats