时间戳

首页 > 解决方案 > Highcharts Angular navigator xAxis 没有缩小

angular - Highcharts Angular navigator xAxis 没有缩小

问题描述

我正在同时处理多个图表，当使用拖动/调整导航器大小时，这些图表必须更新。就我而言，导航器移动正确，但调整大小无法正常工作。如果导航器变大，则没有问题，只有当导航器变小时。由于某种原因，其他导航器不会更新。见截图。

[在此处输入图像描述][屏幕截图] [1]：https://i.stack.imgur.com/7a43k.png

我用于调整导航器大小的代码如下：

let startNav = startDate - ((endDate - startDate) * 2);
let endNav = endDate + ((endDate - startDate) * 2);
this.chart.navigator.xAxis.setExtremes(startNav, endNav);

在我看来，变量 (this.)chart 是主要的图表对象。

  chartOptions: Highcharts.Options = {
chart: {
  zoomType: 'x',
  type: "spline",
  panKey: 'shift',
},
title: {
  text: ""
},
subtitle: {
  text: ""
},
xAxis: {
  type: 'datetime',
  dateTimeLabelFormats: {
    year: '%I:%M:%S %p',
    month: '%I:%M:%S %p',
    day: '%I:%M:%S %p'
  }, title: {
    text: 'Tijd'
  },
  plotBands: []
},
yAxis: [{
  labels: {
    format: '{value} uren',
  },
  title: {
    text: 'lorem ipsum',
  },
  opposite: false
},
{
  gridLineWidth: 0,
  title: {
    text: 'lorem ipsum',
  },
  labels: {
    format: '{value} mm',
  },
  opposite: true
}],
tooltip: {
  valueSuffix: "",
  shared: true
},
credits: {
  enabled: false
},
navigator: {
  enabled: true,
  series: [{}],
     
},
series: [],

};

标签： angularhighcharts

解决方案

您应该更新主轴，导航器轴跟随主轴。

chart.xAxis[0].setExtremes(10, undefined);

演示：https ://jsfiddle.net/BlackLabel/8vubh7zq/

推荐阅读