Неправильное время начала и интервал оси даты и времени старшего графика

Question

Я пытаюсь интегрировать высокие графики в графики. Тем не менее, это не работает в некоторых случаях.

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

Я ожидаю, что график начнется с 3 октября 12:00 UTC, а затем отметится 5 октября, 7 октября и т. Д., Но 3 октября он не будет отображаться как стартовый, а вместо этого начнет тикать 4 октября и далее.

Вот конфигурация. (JsFiddle: https://jsfiddle.net/agoyal/9ohep62u/8/)

 Highcharts.chart('container', {
 chart: {
    type: 'spline'
  },
  title: {
    text: 'Snow depth at Vikjafjellet, Norway'
  },
  subtitle: {
    text: 'Irregular time data in Highcharts JS'
  },
  xAxis: {
    "labels": {
      "enabled": true,
      "style": {
        "color": "#434348"
      }
    },
    "tickInterval": 172800000,  // 2 days
    "min": 1538524800000,  // 3rd october 12 AM
    "type": "datetime",
    "title": {
      "text": "Time"
    },
    "startOnTick": false,
    "max": 1539907200000  // 19th october
  },

  yAxis: {
    title: {
      text: 'Snow depth (m)'
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
  },

  plotOptions: {
    "series": {
      "pointStart": 1538524800000,
      "pointInterval": 172800000
    },
    "line": {
      "dataLabels": {
        "enabled": false
      }
    },
    "style": {
      "textShadow": "0 0 3px black"
    },
    "exporting": {
      "enabled": true
    }
  },


  chartOptoins: {
    "type": "line",
    "backgroundColor": "white",
    "zoomType": "x",
    "lang": {
      "noData": "No data to display"
    },
    "xAxis": {
      "ordinal": false
    }
  },


  time: {
    useUTC: true
  },

  colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

  // Define the data points. All series have a dummy year
  // of 1970/71 in order to be compared on the same x axis. Note
  // that in JavaScript, months start at 0 for January, 1 for February etc.
  series: [{
    "name": "Count",
    "data": [
      [1538524800000, 0],  // 3rd october
      [1538697600000, 0],  // 5rd october
      [1538870400000, 0],   // 7rd october
      [1539043200000, 34000], // 9th october
      [1539216000000, 68000],
      [1539388800000, 186300],
      [1539561600000, 35364],
      [1539734400000, 0],
      [1539907200000, 0]
    ]
  }]
});

Буду признателен за любую помощь!

Answer 1

Вы можете использовать функции tickPositioner и метку formatter для достижения желаемого результата:

xAxis: {
    tickPositioner: function() {
        var ticks = [],
            interval = 172800000,
            points = this.series[0].xData,
            value = 1538524800000,
            i = 0;

        for (i = 0; i < points.length; i++) {
            ticks.push(value);
            value += interval;
        }

        return ticks;
    },
    labels: {
        formatter: function() {
            return Highcharts.dateFormat('%e. %b', this.value)
        }
    }
}

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

API: https://api.highcharts.com/highcharts/xAxis.tickPositioner