angular2-highcharts日期时间类型和点不重合

Question

我有以下选项：

this.options = {
      title: { text: 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2],
        pointInterval: 24 * 3600 * 1000,
        pointStart: Date.UTC(2015, 1, 12) // feb 12, 2015
      }],
      xAxis: {
        type: 'datetime',
        startOnTick:true,
        minPadding:0.015,
        dateTimeLabelFormats: {
          minute: '%H:%M',
          hour: '%H:%M',
          day: '%e. %b',
          week: '%e. %b',
          month: '%b \'%y',
          year: '%Y'
        }
      }
    };

当我选择datetime并点击按钮时：

buttonClicked() {
    let pointStart=new Date(this.dateStart);
    let year=pointStart.getFullYear();
    let month=pointStart.getMonth()+1;
    let day=pointStart.getDate();
    let hours=pointStart.getHours();
    let minutes=pointStart.getMinutes();

    this.chart.series[0].update({
      data: [32, 43, 53, 54],
      pointStart: Date.UTC(year, month, day, hours),
      pointInterval: 365 * 24 * 3600 * 1000
    }, true);
  }

我得到了以下结果：

​

因此，xAxis datetime类型与points不一致。有什么解决方案吗？

Answer 1

默认情况下，xAxis记号与序列点不重合。

如果您希望轴刻度与点x值的日期相同，则可以使用tickPositions或tickPositioner。

演示：http://jsfiddle.net/vfphzyyf/

​

$(function() {
  var chart = Highcharts.chart('container', {
    xAxis: {
      type: 'datetime',
      tickPositioner: function() {
        var ticks = [];
        Highcharts.each(this.series, function(ser) {
          ticks = ticks.concat(ser.xData);
        });
        
        // for date format
        ticks.info = this.tickPositions.info;
        return ticks;
      }
    },
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7],
      pointInterval: 36e5 * 24
    }]
  });

  $('#button').click(function() {
    chart.series[0].update({
      data: [32, 43, 53, 54],
      pointStart: Date.UTC(2017, 5, 5),
      pointInterval: 365 * 24 * 3600 * 1000
    }, true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px; width: 700px;"></div>
<button id="button">update series</button>

​

Answer 2

我像@Kacper Madej建议我的那样使用tickPositioner解决了这个问题。多亏了这个：https://github.com/highcharts/highcharts/issues/5437

在我使用TypeScript的Angular 2中，这是可行的：

tickPositioner: function (min, max) {
      var ticks = this.series[0].processedXData.slice(); // get point positions copy
      ticks.info = this.tickPositions.info;              // copy format for labels
      return ticks;                                      // return new ticks
    }