Kendo UI Chart缩放事件侦听器返回空轴范围

问题描述

用户放大后，我需要x轴上的更新值。根据我发现的示例（https://stackblitz.com/edit/angular-6fbwjp?file=app/app.component.ts），我可以使用zoom事件侦听器。

用于放大的Kendo UI文档：

从此处的图像中，您可以看到轴范围以和空对象{}的形式返回。为什么会发生这种情况，我该如何解决？

我的最终目标是使用放大的范围来更新数据并重绘图形


ZoomEvent {sender: ChartComponent,prevented: false,axisRanges: {…},delta: undefined,originalEvent: {…}}
axisRanges:
__proto__: Object
delta: undefined
originalEvent: {distance: 0,event: PointerEvent,target: path,touches: Array(1),preventDefault: ƒ,…}
prevented: false
sender: ChartComponent {configurationService: ConfigurationService,axisLabelClick: EventEmitter,drag: EventEmitter,dragEnd: EventEmitter,dragStart: EventEmitter,…}
__proto__: PreventableEvent

<kendo-chart [pannable]="{ lock: 'y' }" [zoomable]="{ mousewheel :{ lock: 'y'},selection: { lock: 'y' } }" (zoom)="onZoom($event)"
    [axisDefaults]="axisDefaults" [chartArea]="chartAreaOptions" [legend]="legendOptions">

    <kendo-chart-series>
      <!-- Loop thru all readings -->
      <kendo-chart-series-item *ngFor="let readings of ReadingsData" [data]="readings.items"
        [color]="seriesOptionsArr.get(readings.value).color" [markers]="{ visible: false }"
        [name]="seriesOptionsArr.get(readings.value).name" type="scatterLine" xField="timeRead" yField="sample"
        zIndex="1">
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-x-axis>
      <kendo-chart-x-axis-item type="date" baseUnit="seconds" [min]="xAxisMin"
        [max]="xAxisMax" majorTicksVisible=false>
      </kendo-chart-x-axis-item>
    </kendo-chart-x-axis>
    <kendo-chart-y-axis>
      <kendo-chart-y-axis-item ...>
      </kendo-chart-y-axis-item>
    </kendo-chart-y-axis>

  </kendo-chart>

解决方法

问题在于轴需要具有名称。如下所示添加名称后，将axisRange添加到事件信息中。


      <kendo-chart-x-axis-item type="date" baseUnit="seconds" [labels]="{ format: getAxisDateFormat()}"
        [majorGridLines]="{ visible: false }"
        [minorGridLines]="{ visible: false }" [min]="xAxisMin"
        [max]="xAxisMax" majorTicksVisible=false name='date_axis'>
      </kendo-chart-x-axis-item>

例如 https://stackblitz.com/edit/angular-m2cvrw?file=app/app.component.ts

angular javascript kendo-ui