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'
        }
      }
    };

当我选择日期时间并点击按钮时：

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日期时间类型与点不一致。任何解决方案？

Answer 1

默认情况下，xAxis刻度与系列点不一致。

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

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

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

我通过像@Kacper一样使用tickPositioner来解决这个问题.Madej向我提出了建议。多亏了这个：https://github.com/highcharts/highcharts/issues/5437

这在Angular 2中适用于TypeScript：

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
    }

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

2 个答案: